/* ============================================================
   BYDURAN.CO — Design Tokens
   All variables live here. Never hardcode values elsewhere.
   ============================================================ */

/* Google Fonts loaded via <link> in HTML for non-blocking render */

:root {

  /* ── Brand Colors ────────────────────────────────────────── */
  /* ── Strict palette — 6 colours + espresso brown for text ── */
  --cream:          #F1F0ED;   /* Cream       */
  --cream-dark:     #E7E2DE;   /* Light Linen */
  --cream-light:    #FAFAF6;   /* near-white  */
  --espresso:       #2C2722;   /* dark brown text — derived, no green */
  --espresso-soft:  #3D3830;
  --espresso-mid:   #504A44;
  --taupe:          #5A5048;   /* body text mid-dark brown */
  --olive:          #918674;   /* Brown       */
  --olive-light:    #918674;   /* Rust        */
  --olive-dark:     #766A5E;   /* Brown dark  */
  --sand:           #C1B6A4;   /* Muted Brown */
  --sand-dark:      #A8A090;   /* Muted Brown dark */
  --sand-light:     #E1DACA;   /* Oat         */
  --white:          #FFFFFF;

  /* ── Semantic Colors ─────────────────────────────────────── */
  --color-bg:           var(--cream);        /* #F1F0ED */
  --color-bg-alt:       var(--cream-dark);   /* #E7E2DE */
  --color-bg-dark:      var(--espresso);
  --color-bg-dark-soft: var(--espresso-soft);
  --color-text:         var(--taupe);        /* #5A5048 — readable on cream */
  --color-heading:      var(--espresso);     /* #2C2722 — strong contrast   */
  --color-accent:       var(--olive-light);  /* #918674 Rust — eyebrows, labels, links */
  --color-accent-light: var(--sand);         /* #C1B6A4 Muted Brown         */
  --color-muted:        var(--sand-dark);    /* #A8A090                     */
  --color-border:       var(--sand-light);   /* #E1DACA Oat                 */
  --color-border-dark:  rgba(193, 182, 164, 0.15);

  /* Overlays */
  --overlay-dark:       rgba(44, 39, 34, 0.62);
  --overlay-mid:        rgba(44, 39, 34, 0.38);
  --overlay-soft:       rgba(44, 39, 34, 0.18);
  --overlay-cream:      rgba(245, 245, 235, 0.08);

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', system-ui, -apple-system, sans-serif;
  --font-script:  'Pinyon Script', 'Brush Script MT', cursive;

  /* Scale — fluid where it matters */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   2rem;       /* 32px */
  --text-3xl:   2.5rem;     /* 40px */
  --text-4xl:   3.5rem;     /* 56px */
  --text-5xl:   5rem;       /* 80px */

  /* Fluid headings */
  --text-hero:    clamp(3.5rem, 9vw,  8.5rem);
  --text-display: clamp(2.75rem, 6vw, 5.5rem);
  --text-section: clamp(2.25rem, 4vw, 3.75rem);
  --text-title:   clamp(1.5rem, 2.5vw, 2.25rem);
  --text-script:  clamp(3rem, 6vw, 6rem);

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Leading */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;
  --leading-loose:   2.1;

  /* Tracking */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.01em;
  --tracking-normal:   0;
  --tracking-wide:     0.06em;
  --tracking-wider:    0.12em;
  --tracking-widest:   0.22em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --sp-1:   0.25rem;    /* 4px */
  --sp-2:   0.5rem;     /* 8px */
  --sp-3:   0.75rem;    /* 12px */
  --sp-4:   1rem;       /* 16px */
  --sp-5:   1.25rem;    /* 20px */
  --sp-6:   1.5rem;     /* 24px */
  --sp-8:   2rem;       /* 32px */
  --sp-10:  2.5rem;     /* 40px */
  --sp-12:  3rem;       /* 48px */
  --sp-16:  4rem;       /* 64px */
  --sp-20:  5rem;       /* 80px */
  --sp-24:  6rem;       /* 96px */
  --sp-32:  8rem;       /* 128px */
  --sp-40:  10rem;      /* 160px */
  --sp-48:  12rem;      /* 192px */
  --sp-64:  16rem;      /* 256px */

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;
  --container-full: 1680px;

  --nav-height:  80px;
  --gutter:      clamp(1.25rem, 4vw, 3rem);
  --col-gap:     clamp(1rem, 2.5vw, 2rem);
  --section-v:   clamp(5rem, 11vw, 11rem);

  /* ── Borders & Radius ────────────────────────────────────── */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-xs:   0 1px 4px  rgba(44, 39, 34, 0.06);
  --shadow-sm:   0 2px 12px rgba(44, 39, 34, 0.09);
  --shadow-md:   0 8px 32px rgba(44, 39, 34, 0.12);
  --shadow-lg:   0 20px 56px rgba(44, 39, 34, 0.17);
  --shadow-xl:   0 36px 80px rgba(44, 39, 34, 0.23);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.0,  0.0,  0.2, 1);
  --ease-in:     cubic-bezier(0.4,  0.0,  1.0, 1);
  --ease-inout:  cubic-bezier(0.4,  0.0,  0.2, 1);
  --ease-luxury: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1.0);

  --dur-fast:   180ms;
  --dur-mid:    360ms;
  --dur-slow:   640ms;
  --dur-xslow:  1000ms;
  --dur-reveal: 900ms;

  /* ── Z-index scale ───────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-raised:   10;
  --z-float:    20;
  --z-sticky:   30;
  --z-nav:      100;
  --z-modal:    200;
  --z-toast:    300;
}

/* ── Dark Section Context ─────────────────────────────────── */
.section--dark {
  --color-bg:      var(--olive);           /* Brown #918674          */
  --color-text:    rgba(245, 245, 235, 0.85);
  --color-heading: var(--cream);           /* Cream #F1F0ED          */
  --color-accent:  var(--sand-light);      /* Oat #E1DACA as accent  */
  --color-muted:   rgba(225, 218, 202, 0.55);
  --color-border:  rgba(225, 218, 202, 0.18);

  background-color: var(--olive);
  color: var(--cream);
}

.section--dark-soft {
  --color-bg:      var(--olive-dark);      /* #766A5E */
  background-color: var(--olive-dark);
  color: var(--cream);
}