/* ============================================================
   Slate · Design Tokens
   colors_and_type.css — single source of truth (v2 · foundations)
   ============================================================ */

/* Fonts ----------------------------------------------------- */
/* Two families only: Fraunces (display, editorial) + DM Sans (UI, body) */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Fraunces-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/Fraunces-300-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fraunces-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Fraunces-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Fraunces-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Fraunces-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Fraunces-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Fraunces-700.woff2') format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/DMSans-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/DMSans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/DMSans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/DMSans-700.woff2') format('woff2');
}

/* ============================================================
   Tokens — LIGHT (default)
   ============================================================ */
:root {
  /* ─── Brand · Forest (primary, with full UI role) ─────── */
  --green-50:  #ECF1ED;   /* surface tint, hover wash */
  --green-100: #CFDDD4;   /* tag fill, soft chip */
  --green-200: #9DBAA8;
  --green-300: #6E947D;
  --green-400: #466E55;
  --green-500: #284F3A;
  --green-600: #143524;
  --green-700: #0A2A1F;   /* PRIMARY — Forest */
  --green-800: #061C14;
  --green-900: #03110C;   /* deep ink-green for dark surfaces */

  /* ─── Accent · Champagne (single, warm, aligned) ──────── */
  /* One canonical hex. Chosen warm so it reads as ink-on-paper rather than metallic. */
  --champagne-50:  #FAF3E4;
  --champagne-100: #F0E2BD;
  --champagne-200: #DEC58D;
  --champagne-300: #C49E5C;
  --champagne-400: #A8763B;   /* ACCENT — Champagne (canonical) */
  --champagne-500: #8C5F2E;
  --champagne-600: #6F4A24;
  --champagne-700: #4A3119;
  /* legacy aliases — keep so older preview files don't break */
  --amber-50:  var(--champagne-50);
  --amber-100: var(--champagne-100);
  --amber-200: var(--champagne-200);
  --amber-300: var(--champagne-300);
  --amber-400: var(--champagne-400);
  --amber-500: var(--champagne-500);
  --amber-600: var(--champagne-600);
  --amber-700: var(--champagne-700);
  --clay-50:  var(--champagne-50);
  --clay-100: var(--champagne-100);
  --clay-200: var(--champagne-200);
  --clay-300: var(--champagne-300);
  --clay-400: var(--champagne-400);
  --clay-500: var(--champagne-500);
  --clay-600: var(--champagne-600);
  --clay-700: var(--champagne-700);

  /* ─── Counter-tone · Oyster (cool, single quiet note) ─── */
  /* One cool grey-blue to keep warmth from going monotone. Use sparingly. */
  --oyster-50:  #EEF0F1;
  --oyster-100: #DDE2E4;
  --oyster-200: #B7C0C4;
  --oyster-300: #8B98A0;
  --oyster-400: #5F6E76;
  --oyster-500: #3F4A50;

  /* ─── Warm neutrals · Stone (bone surface) ─────────────── */
  --stone-50:  #F4F1EA;   /* bone paper */
  --stone-100: #EBE6DA;
  --stone-200: #D8D0BE;
  --stone-300: #BAB09A;
  --stone-400: #8E8674;
  --stone-500: #635D4F;
  --stone-600: #463F33;
  --stone-700: #2E2A22;
  --stone-800: #1F1D17;
  --stone-900: #1C2A22;   /* ink (forest-tinted near-black) */

  /* ─── Semantic tokens ─────────────────────────────────── */
  --color-bg:           var(--stone-50);
  --color-bg-elevated:  #FFFFFF;
  --color-bg-sunken:    var(--stone-100);
  --color-bg-inverse:   var(--stone-900);
  --color-bg-soft:      var(--green-50);    /* forest as quiet UI surface */
  --color-bg-cool:      var(--oyster-50);   /* the rare cool note */

  --color-fg:           var(--stone-900);
  --color-fg-muted:     var(--stone-600);
  --color-fg-subtle:    var(--stone-500);
  --color-fg-inverse:   var(--stone-50);
  --color-fg-on-primary: var(--stone-50);

  --color-border:        var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-border-focus:  var(--green-400);
  --color-border-hair:   rgba(140,130,110,0.28); /* magazine hairline */

  --color-primary:       var(--green-700);
  --color-primary-hover: var(--green-600);
  --color-primary-press: var(--green-800);
  --color-primary-soft:  var(--green-50);
  --color-primary-tag:   var(--green-100);

  --color-accent:        var(--champagne-400);
  --color-accent-hover:  var(--champagne-500);
  --color-accent-soft:   var(--champagne-50);

  --color-cool:          var(--oyster-400);
  --color-cool-soft:     var(--oyster-50);

  --color-success:     #1F7A4D;
  --color-success-bg:  #E3F3EA;
  --color-warning:     #B4751A;
  --color-warning-bg:  #FAEFD8;
  --color-danger:      #B23B3B;
  --color-danger-bg:   #F7E1E1;
  --color-info:        var(--oyster-400);
  --color-info-bg:     var(--oyster-50);

  /* ─── Type ────────────────────────────────────────────── */
  /* Two families. --font-sans is an alias of --font-body for back-compat. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    var(--font-body);
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Scale — 4px-aligned for baseline grid */
  --text-xs:    12px;   /* small caps, micro labels */
  --text-sm:    14px;   /* small body */
  --text-base:  16px;   /* body */
  --text-md:    20px;   /* lede / italic pull */
  --text-lg:    24px;   /* h4 */
  --text-xl:    32px;   /* h3 */
  --text-2xl:   44px;   /* h2 */
  --text-3xl:   64px;   /* h1 */
  --text-4xl:   96px;   /* display */
  --text-5xl:   148px;  /* hero display */
  --text-6xl:   200px;  /* finale display */

  /* Line-height — multiples of 4px to lock to baseline */
  --leading-display: 0.94;   /* hero/display */
  --leading-tight:   1.0;    /* h1/h2 */
  --leading-snug:    1.18;   /* h3 */
  --leading-lede:    1.5;    /* lede + italic pulls */
  --leading-body:    1.55;   /* body */

  --tracking-hero:   -0.034em;
  --tracking-tight:  -0.026em;
  --tracking-snug:   -0.018em;
  --tracking-normal:  0em;
  --tracking-caps:    0.22em; /* magazine small-caps */

  --weight-light:   300;   /* Fraunces editorial light */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ─── Spacing ─────────────────────────────────────────── */
  /* 4px base (locks to baseline grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  /* The premium move: dramatic spacing contrast.
     "Chapter" = the gap between magazine sections. Used sparingly. */
  --space-chapter:    180px;
  --space-chapter-xl: 240px;

  /* ─── Baseline grid ───────────────────────────────────── */
  --baseline: 4px;        /* every block aligns to this */
  --baseline-major: 8px;  /* used for vertical rhythm of body copy */

  /* ─── Radii — tightened, editorial ─────────────────── */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-xl:   10px;
  --radius-pill: 999px;

  /* ─── Shadows — hairline-first ─────────────────────── */
  --shadow-sm: 0 1px 0 rgba(28, 42, 34, 0.04);
  --shadow-md: 0 1px 2px rgba(28, 42, 34, 0.06);
  --shadow-lg: 0 16px 48px rgba(28, 42, 34, 0.16),
               0 4px 12px rgba(28, 42, 34, 0.06);

  --hairline:        1px solid var(--color-border-hair);
  --hairline-strong: 1px solid var(--stone-300);

  /* ─── Focus ring ──────────────────────────────────── */
  --ring: 0 0 0 3px rgba(70, 110, 85, 0.32);

  /* ─── Motion ──────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);    /* default — slow-out */
  --ease-in:     cubic-bezier(0.32, 0, 0.67, 0);
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bounce: cubic-bezier(0.34, 1.28, 0.64, 1);
  --dur-micro:   120ms;
  --dur-fast:    180ms;
  --dur-med:     240ms;
  --dur-slow:    400ms;
  --dur-curtain: 700ms;   /* page transitions / curtain reveal */

  /* ─── Misc ────────────────────────────────────────── */
  --content-max:     1280px;
  --content-narrow:  920px;
  --nav-height:      76px;
}

/* ============================================================
   Tokens — DARK
   ============================================================ */
.dark, [data-theme="dark"] {
  --color-bg:           #0A1612;
  --color-bg-elevated:  #122019;
  --color-bg-sunken:    #060F0C;
  --color-bg-inverse:   var(--stone-50);
  --color-bg-soft:      #14201A;
  --color-bg-cool:      #1A2226;

  --color-fg:           #EDE7D6;
  --color-fg-muted:     #B0A998;
  --color-fg-subtle:    #807A6C;
  --color-fg-inverse:   var(--stone-900);
  --color-fg-on-primary: #0A1612;

  --color-border:        #1F2D26;
  --color-border-strong: #344036;
  --color-border-hair:   rgba(237, 231, 214, 0.18);

  --color-primary:       var(--green-300);
  --color-primary-hover: #8AAE98;
  --color-primary-press: var(--green-400);
  --color-primary-soft:  #14201A;
  --color-primary-tag:   #1B2D24;

  --color-accent:        var(--champagne-300);
  --color-accent-hover:  var(--champagne-200);
  --color-accent-soft:   #1F1A12;

  --color-cool:          var(--oyster-200);
  --color-cool-soft:     #161D21;

  --color-success:     #55B082;
  --color-success-bg:  #14261E;
  --color-warning:     #D9A258;
  --color-warning-bg:  #291F12;
  --color-danger:      #D47070;
  --color-danger-bg:   #2A1616;
  --color-info:        var(--oyster-200);
  --color-info-bg:     #161D21;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  --ring: 0 0 0 3px rgba(110, 148, 125, 0.32);
}

/* ============================================================
   Base semantic styles
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-fg);
  background: var(--color-bg);
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display & headings — Fraunces, mostly light/regular */
.display, .hero {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-5xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-hero);
  font-feature-settings: 'ss01';
}
h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

/* Italic Fraunces · the editorial pull-quote / lede voice */
.lede, .italic-lede {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-light);
  font-size: var(--text-md);
  line-height: var(--leading-lede);
  letter-spacing: -0.005em;
  color: var(--color-fg-muted);
}

p {
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-fg);
}
.caption, small {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  line-height: var(--leading-body);
}

/* Magazine small-caps — appears in eyebrows, dividers, footer */
.ui-caps {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Editorial accents */
.italic-clay {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--color-accent);
}
.italic-ink {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  color: var(--green-500);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

/* ============================================================
   Utility — baseline rhythm helpers
   ============================================================ */
.stack-1  > * + * { margin-top: var(--space-1); }
.stack-2  > * + * { margin-top: var(--space-2); }
.stack-4  > * + * { margin-top: var(--space-4); }
.stack-6  > * + * { margin-top: var(--space-6); }
.stack-8  > * + * { margin-top: var(--space-8); }
.stack-12 > * + * { margin-top: var(--space-12); }
.stack-16 > * + * { margin-top: var(--space-16); }
.stack-chapter > * + * { margin-top: var(--space-chapter); }