/**
 * CSS Variables (Custom Properties)
 * Define all theme variables here
 */

:root {
  /* Colors */
  --color-brand-primary-01: #450737;
  --color-brand-primary-02: #69193f;
  --color-brand-primary-03: #b3524f;
  --color-brand-primary-04: #efeaee;

  --color-brand-secondary-01: #fff6b5;
  --color-brand-secondary-02: #b387d8;
  --color-brand-secondary-03: #b34f7f;

  --color-neutral-01: #fff;
  --color-neutral-02: #f0f0f0;
  --color-neutral-03: #bbbbbb;
  --color-neutral-04: #6d6d6d;
  --color-neutral-05: #1d1d1d;

  /* Opacidades */
  --opacidad-01: rgba(240, 240, 240, 0.75); /* neutral-02 a 75% */
  --opacidad-02: rgba(179, 135, 216, 0.3); /* secondary-02 a 30% */
  --opacidad-03: rgba(179, 79, 127, 0.4); /* secondary-03 a 40% */
  --opacidad-04: rgba(69, 7, 55, 0.3); /* primary-01 a 30% */
  --opacidad-05: rgba(29, 29, 29, 0.2); /* neutral-05 a 20% */

  /* Typography */
  --font-primary: "Albert Sans", sans-serif;
  --font-secondary: "Gasoek One", sans-serif;
  --font-size-base: 16px;
  --line-height-base: 1.6;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* VARIABLES TIPOGRÁFICAS ESPECÍFICAS */
  --font-size-h1: 48px;
  --line-height-h1: 48px;
  --font-size-h2: 40px;
  --line-height-h2: 56px;
  --font-size-h3: 32px;
  --line-height-h3: 40px;
  --font-size-h4: 24px;
  --line-height-h4: 32px;
  --font-size-body-01: 20px;
  --line-height-body-01: 32px;
  --font-size-body-02: 18px;
  --line-height-body-02: 28px;
  --font-size-body-03: 16px;
  --line-height-body-03: 24px;
  --font-size-body-04: 14px;
  --line-height-body-04: 28px;

  /* =======================================================
     DISPLAY - GASOEK ONE (Fluid Typography)
     ======================================================= */
  
  --font-size-display-1: clamp(36px, 4vw + 20px, 64px);
  --line-height-display-1: 1.25;

  --font-size-display-2: clamp(28px, 3vw + 16px, 48px);
  --line-height-display-2: 1.15;

  --font-size-display-3: clamp(24px, 2vw + 16px, 40px);
  --line-height-display-3: 1;

  --font-size-display-4: clamp(18px, 1.5vw + 14px, 32px);
  --line-height-display-4: 1.25;

  /* Dimensions */
  --max-width-content: 1440px;
  --carousel-max-width: 800px;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 3rem;

  /* Border Radius */
  --border-radius: 4px;
  --border-radius-sm: 2px;
  --border-radius-lg: 8px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-3xl: 32px;
  --border-radius-4xl: 48px;
  --border-radius-xxl: 64px;
  --border-radius-xxxl: 100px;

  /* Breakpoints */
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;

  /* Transitions */
  --transition-base: all 0.1s ease-in-out;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15);
}