/* ============================================================
   Design Tokens — Direction C "Modern Regional"
   Single source of truth for color, type, space, motion.
   ============================================================ */

:root {
  /* ---------- Color: brand neutrals ---------- */
  --color-obsidian: #0A0A0B;     /* primary dark surface */
  --color-slate:    #1A1B1E;     /* elevated dark surface */
  --color-graphite: #2A2B2F;     /* dark border / divider */
  --color-ivory:    #F4EFE7;     /* primary light surface */
  --color-bone:     #ECE5D8;     /* secondary light surface */
  --color-mist:     #FAF7F1;     /* lightest surface */

  /* ---------- Color: brand accents ---------- */
  --color-dune:     #B89A78;     /* signature warm accent */
  --color-sand:     #D9C9B4;     /* secondary warm */
  --color-ember:    #7A4A2E;     /* deep accent — hover/active */

  /* ---------- Color: text ---------- */
  --color-text:           #13130F;
  --color-text-muted:     #6E665A;
  --color-text-subtle:    #9A938A;
  --color-text-on-dark:   #F4EFE7;
  --color-text-on-dark-muted: #B6AFA3;

  /* ---------- Color: semantic ---------- */
  --color-success: #4F7A5C;
  --color-warn:    #B8762B;
  --color-danger:  #9E4231;
  --color-info:    #4A6A78;

  /* ---------- Color: roles (use these in components) ---------- */
  --bg:             var(--color-mist);
  --bg-elevated:    var(--color-ivory);
  --bg-inverse:     var(--color-obsidian);
  --bg-inverse-elevated: var(--color-slate);
  --surface-line:   rgba(19, 19, 15, 0.10);
  --surface-line-strong: rgba(19, 19, 15, 0.18);
  --surface-line-on-dark: rgba(244, 239, 231, 0.12);
  --surface-line-on-dark-strong: rgba(244, 239, 231, 0.22);

  --fg:             var(--color-text);
  --fg-muted:       var(--color-text-muted);
  --fg-on-dark:     var(--color-text-on-dark);
  --fg-on-dark-muted: var(--color-text-on-dark-muted);

  --accent:         var(--color-dune);
  --accent-hover:   var(--color-ember);

  /* ---------- Typography: families ---------- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif;
  --font-sans:    "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---------- Typography: fluid scale (~1.25 modular) ---------- */
  --fs-caption:  0.75rem;                              /* 12 */
  --fs-small:    0.875rem;                             /* 14 */
  --fs-body:     1rem;                                 /* 16 */
  --fs-body-lg:  1.125rem;                             /* 18 */
  --fs-h3:       clamp(1.25rem, 0.95rem + 1.1vw, 1.625rem);
  --fs-h2:       clamp(1.625rem, 1.15rem + 2.1vw, 2.5rem);
  --fs-h1:       clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);
  --fs-display:  clamp(2.75rem, 1.4rem + 6vw, 5.5rem);

  /* ---------- Typography: line-height ---------- */
  --lh-tight:    1.05;
  --lh-snug:     1.18;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* ---------- Typography: tracking ---------- */
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-loose:    0.04em;
  --tr-eyebrow:  0.18em;

  /* ---------- Typography: weight ---------- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-display:  900;

  /* ---------- Spacing scale (8px base) ---------- */
  --space-3xs:  0.25rem;  /*  4 */
  --space-2xs:  0.5rem;   /*  8 */
  --space-xs:   0.75rem;  /* 12 */
  --space-sm:   1rem;     /* 16 */
  --space-md:   1.5rem;   /* 24 */
  --space-lg:   2rem;     /* 32 */
  --space-xl:   3rem;     /* 48 */
  --space-2xl:  4rem;     /* 64 */
  --space-3xl:  6rem;     /* 96 */
  --space-4xl:  8rem;     /* 128 */

  /* ---------- Section rhythm ---------- */
  --section-y:  clamp(4rem, 8vw, 8rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);

  /* ---------- Layout ---------- */
  --container-max:    78rem;   /* 1248px */
  --container-narrow: 56rem;   /*  896px */
  --container-wide:   90rem;   /* 1440px */
  --gutter:           clamp(1rem, 3vw, 2.5rem);

  /* ---------- Radii ---------- */
  --radius-xs:   2px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm, low-key) ---------- */
  --shadow-sm: 0 1px 2px rgba(19, 19, 15, 0.06),
               0 1px 1px rgba(19, 19, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(19, 19, 15, 0.08),
               0 2px 4px rgba(19, 19, 15, 0.04);
  --shadow-lg: 0 18px 36px rgba(19, 19, 15, 0.10),
               0 6px 12px rgba(19, 19, 15, 0.06);
  --shadow-inset: inset 0 0 0 1px rgba(19, 19, 15, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-instant:   120ms;
  --dur-fast:      200ms;
  --dur-base:      400ms;
  --dur-slow:      700ms;
  --dur-reveal:    900ms;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-overlay: 1000;
  --z-modal:   2000;
  --z-toast:   3000;
}

/* ---------- Breakpoints ---------- */
/* Mobile-first; reference values (use in @media):
   --bp-sm: 480px
   --bp-md: 768px
   --bp-lg: 1024px
   --bp-xl: 1280px
   --bp-2xl: 1536px
*/

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-reveal: 0ms;
  }
}