/* ============================================================
   KAERN — Design Tokens
   Earthen Monolith / Riad Minimalism
   Single source of truth. Reuse these vars; do not hard-code.
   ============================================================ */

:root {
  /* ---------- Named brand colors ---------- */
  --color-moss:        #121411;  /* Heritage Moss — primary atmospheric base */
  --color-terracotta:  #a65d43;  /* Zellige Terracotta — interactive accent */
  --color-sand:        #d9c5b2;  /* Desert Sand — light / typography accent */
  --color-charcoal:    #242621;  /* Warm Charcoal — card / container neutral */

  /* ---------- Heritage Moss tonal ramp ---------- */
  --moss-100: #8f918c;
  --moss-200: #6e706b;
  --moss-300: #53554f;
  --moss-400: #3a3c37;
  --moss-500: #292b26;
  --moss-600: #1e201b;
  --moss-700: #121411;
  --moss-800: #0d0f0a;

  /* ---------- Zellige Terracotta tonal ramp ---------- */
  --terra-100: #e8c3b2;
  --terra-200: #d89e86;
  --terra-300: #c57e62;
  --terra-400: #a65d43;
  --terra-500: #894a34;
  --terra-600: #6b3826;

  /* ---------- Desert Sand tonal ramp ---------- */
  --sand-100: #f4e7da;
  --sand-200: #e8d6c5;
  --sand-300: #d9c5b2;
  --sand-400: #c3ad96;
  --sand-500: #a88e76;
  --sand-600: #876f58;

  /* ---------- Semantic surfaces (LIGHT mode default — Desert Sand) ---------- */
  --surface:                   #f4e7da;   /* Sand 100 — primary surface */
  --surface-dim:               #e8d6c5;   /* Sand 200 */
  --surface-container-lowest:  #fbf3e6;   /* almost cream */
  --surface-container-low:     #efe1cf;
  --surface-container:         #ffffff;   /* cards = bright cream/white */
  --surface-container-high:    #faf0e1;
  --surface-container-highest: #ede0cb;
  --surface-bright:            #ffffff;

  /* ---------- Foreground (now dark text on light) ---------- */
  --on-surface:         #1a1c17;          /* Heritage Moss 600 — primary text */
  --on-surface-variant: #3a3c37;          /* Moss 400 — body text */
  --on-surface-muted:   #6b6359;          /* Sand-warmed brown — captions */
  --outline:            #876f58;          /* Warm tan border */
  --outline-variant:    rgba(26, 28, 23, 0.18);

  /* Inverse (now the DARK Moss surface — used for hero / dramatic sections) */
  --inverse-surface:    var(--moss-700);
  --inverse-on-surface: #e3e3db;
  --inverse-on-muted:   var(--moss-100);

  /* ---------- Type — families ---------- */
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Type — scale ---------- */
  --text-display: 4rem;       /* 64px */
  --text-h1:      2.5rem;     /* 40px */
  --text-h2:      2rem;       /* 32px */
  --text-h3:      1.5rem;     /* 24px */
  --text-body-lg: 1.125rem;   /* 18px */
  --text-body:    1rem;       /* 16px */
  --text-label:   0.875rem;   /* 14px */
  --text-caption: 0.75rem;    /* 12px */

  /* Mobile down-shift */
  --text-display-mobile: 2rem;     /* 32px — fits narrow viewports without word-breaking */
  --text-h1-mobile:      1.75rem;
  --text-h2-mobile:      1.375rem;

  /* ---------- Type — tracking ---------- */
  --tracking-display: 0.04em;
  --tracking-headline: 0.03em;
  --tracking-body:    0.01em;
  --tracking-label:   0.18em;   /* Generous, museum-style */
  --tracking-eyebrow: 0.24em;

  /* ---------- Type — weights ---------- */
  --weight-display: 600;
  --weight-headline: 500;
  --weight-body:    400;
  --weight-label:   600;

  /* ---------- Spacing scale (8px unit) ---------- */
  --space-1:  0.5rem;     /* 8 */
  --space-2:  1rem;       /* 16 */
  --space-3:  1.5rem;     /* 24 */
  --space-4:  2rem;       /* 32 */
  --space-5:  3rem;       /* 48 */
  --space-6:  4rem;       /* 64 */
  --space-7:  6rem;       /* 96 */
  --space-8:  8rem;       /* 128 — section-gap */

  /* ---------- Layout ---------- */
  --container-max:    1200px;
  --gutter:           2rem;
  --margin-mobile:    1.25rem;
  --margin-desktop:   4rem;
  --section-gap:      var(--space-8);

  /* ---------- Radius ---------- */
  --radius-sm:   0.125rem;
  --radius-md:   0.25rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* ---------- Borders ---------- */
  --hairline: 1px solid var(--outline-variant);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   180ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;

  /* ---------- Shadows (occlusion, not elevation) ---------- */
  --shadow-soft:  0 24px 60px -20px rgba(0, 0, 0, 0.45);
  --shadow-deep:  0 40px 100px -30px rgba(0, 0, 0, 0.6);
}