/* ==========================================================================
   TEASPOON DESIGN TOKENS
   Single source of truth for Teaspoon web work. Copy this file in whole,
   then build with the variables — never hard-code a hex, size or duration.

   Contents
     1. Brand palette (from the Visual Branding Style Guide)
     2. Neutral ramp
     3. Semantic surface / ink / border tokens
     4. Typography
     5. Spacing, sizing, radii
     6. Elevation
     7. Motion
     8. Dark theme
     9. Base element styles
    10. Utilities (eyebrow, script band, rail, focus)

   Contrast law: gold is a SURFACE, not an ink. #F0B323 on white is 1.9:1.
   Gold text is legal only on Teaspoon Black.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- 1. Brand palette ------------------------------------------------- */
  --ts-gold: #F0B323;            /* PMS 7409 C  · CMYK 0/27/92/0   */
  --ts-black: #302E2C;           /* PMS Process Black C            */
  --ts-muted-gold-1: #E7DDCA;    /* PMS 9226 C  · CMYK 0/11/30/8   */
  --ts-muted-gold-2: #D4B36B;    /* PMS 7752 C  · CMYK 0/15/85/23  */
  --ts-muted-gold-3: #B79F6C;    /* PMS 7753 C  · CMYK 0/13/72/36  */
  --ts-light-grey: #D6D6D6;      /* PMS 427 C   · CMYK 14/8/4/0    */
  --ts-white: #FFFFFF;

  /* Interaction shades of gold. Derived, not in the printed guide —
     use only for hover/active states, never as a new brand color. */
  --ts-gold-hover: #DDA31B;
  --ts-gold-active: #C68F14;
  --ts-gold-tint: #FDF4E0;       /* faintest gold wash for panels    */

  /* --- 2. Neutral ramp (tints of Teaspoon Black, kept warm) ------------- */
  --ts-ink-900: #302E2C;
  --ts-ink-800: #3F3C3A;
  --ts-ink-700: #55514E;
  --ts-ink-600: #6B6663;
  --ts-ink-500: #837D79;
  --ts-ink-400: #9E9894;
  --ts-ink-300: #BEB9B5;
  --ts-ink-200: #D6D6D6;
  --ts-ink-100: #E8E6E4;
  --ts-ink-050: #F4F2F0;
  --ts-canvas: #FAFAFA;          /* the guide's own off-white panel  */

  /* --- 3. Semantic tokens ---------------------------------------------- */
  --ts-surface: var(--ts-white);
  --ts-surface-sunken: var(--ts-canvas);
  --ts-surface-raised: var(--ts-white);
  --ts-surface-inverse: var(--ts-black);
  --ts-surface-warm: var(--ts-muted-gold-1);
  /* Hover/active wash for ghost and secondary controls. Semantic on purpose:
     the raw --ts-ink-* ramp is NOT theme-aware, so using ink-050 directly here
     would render a hovered button as #F4F2F0 on #F4F2F0 text in dark mode. */
  --ts-surface-hover: var(--ts-ink-050);

  /* Every text token below clears WCAG AA (4.5:1) on both white and --ts-canvas.
     --ts-ink-500 and lighter are decorative only: ink-500 is 4.06:1 on white,
     so it is legal for borders and icons but not for text. */
  --ts-text: var(--ts-ink-900);          /* 13.5:1 on white · 13.0:1 on canvas */
  --ts-text-muted: var(--ts-ink-600);    /*  5.7:1 on white ·  5.4:1 on canvas */
  --ts-text-subtle: #787270;             /*  4.7:1 on white ·  4.5:1 on canvas */
  --ts-text-inverse: var(--ts-white);
  --ts-text-on-gold: var(--ts-black);    /*  7.2:1 — the only gold pairing */

  --ts-border: var(--ts-ink-200);
  --ts-border-strong: var(--ts-ink-400);
  --ts-border-hairline: rgba(48, 46, 44, 0.10);

  --ts-accent: var(--ts-gold);
  --ts-accent-quiet: var(--ts-muted-gold-2);
  --ts-focus: var(--ts-black);

  /* Status colors. Kept desaturated and warm so they sit inside the palette
     instead of fighting it. Always pair with an icon or label — never rely on
     hue alone to carry meaning. These are the LIGHT-theme values; the dark
     blocks below lift each one, because the light set lands at 2.3–4.4:1 on a
     dark surface and would fail as error text and invalid-input borders. */
  --ts-success: #4F6B45;   /*  5.05:1 on white */
  --ts-warning: #B77E1E;   /*  4.53:1 on white */
  --ts-danger:  #9B3B2E;   /*  6.90:1 on white */
  --ts-info:    #4A5D6B;   /*  7.62:1 on white */

  /* --- 4. Typography ----------------------------------------------------
     Both brand fonts are on Adobe Fonts, so the real thing is usually available:
     Basic Sans (Latinotype) and Alisha (Laura Worthington). Adobe's CSS family
     names are lowercase-hyphenated, which is why each stack lists that first and
     the desktop name second. Everything after those is the fallback ladder for
     when no kit is loaded - including artifacts, whose CSP blocks Typekit. */
  --ts-font-display: "basic-sans", "Basic Sans", "Jost", "Poppins", "Montserrat", system-ui, sans-serif;
  --ts-font-body: "Yrsa", Georgia, "Times New Roman", serif;
  --ts-font-script: "alisha", "Alisha", "Parisienne", "Great Vibes", cursive;
  --ts-font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  /* Modular scale, 1.25 ratio, 16px base */
  --ts-text-2xs: 0.6875rem;  /* 11px — rail captions only            */
  --ts-text-xs:  0.75rem;    /* 12px — the brand's floor             */
  --ts-text-sm:  0.875rem;   /* 14px                                 */
  --ts-text-md:  1rem;       /* 16px — UI default                    */
  --ts-text-lg:  1.125rem;   /* 18px — body copy default             */
  --ts-text-xl:  1.375rem;   /* 22px                                 */
  --ts-text-2xl: 1.75rem;    /* 28px                                 */
  --ts-text-3xl: 2.25rem;    /* 36px                                 */
  --ts-text-4xl: 3rem;       /* 48px                                 */
  --ts-text-5xl: 4rem;       /* 64px — hero                          */

  /* Tracking. Guide values are InDesign units ÷ 1000. */
  --ts-track-display: 0.2em;   /* guide: 200 — headlines, eyebrows   */
  --ts-track-body: 0.05em;     /* guide: 50  — body, UI              */
  --ts-track-script: 0;        /* guide: 0   — Alisha                */

  --ts-leading-tight: 1.15;
  --ts-leading-snug: 1.35;
  --ts-leading-normal: 1.6;
  --ts-leading-relaxed: 1.75;  /* long-form Yrsa                     */

  --ts-weight-light: 300;
  --ts-weight-regular: 400;
  --ts-weight-semibold: 600;
  --ts-weight-bold: 700;

  --ts-measure: 68ch;          /* comfortable line length            */

  /* --- 5. Spacing, sizing, radii ---------------------------------------- */
  --ts-space-1: 0.25rem;   /*  4px */
  --ts-space-2: 0.5rem;    /*  8px */
  --ts-space-3: 0.75rem;   /* 12px */
  --ts-space-4: 1rem;      /* 16px */
  --ts-space-5: 1.5rem;    /* 24px */
  --ts-space-6: 2rem;      /* 32px */
  --ts-space-7: 3rem;      /* 48px */
  --ts-space-8: 4rem;      /* 64px */
  --ts-space-9: 6rem;      /* 96px */
  --ts-space-10: 8rem;     /* 128px */

  --ts-container: 1200px;
  --ts-container-narrow: 760px;
  --ts-gutter: var(--ts-space-5);
  --ts-tap-target: 44px;

  --ts-radius-none: 0;
  --ts-radius-sm: 2px;
  --ts-radius-md: 4px;
  --ts-radius-lg: 8px;
  --ts-radius-xl: 16px;
  --ts-radius-pill: 999px;

  /* --- 6. Elevation ------------------------------------------------------
     Warm-tinted and low-opacity. Teaspoon reads premium through whitespace
     and hairlines, not through heavy drop shadows. */
  --ts-shadow-none: none;
  --ts-shadow-sm: 0 1px 2px rgba(48, 46, 44, 0.06);
  --ts-shadow-md: 0 2px 4px rgba(48, 46, 44, 0.05), 0 6px 16px rgba(48, 46, 44, 0.07);
  --ts-shadow-lg: 0 4px 8px rgba(48, 46, 44, 0.05), 0 16px 40px rgba(48, 46, 44, 0.10);
  --ts-shadow-focus: 0 0 0 2px var(--ts-surface), 0 0 0 4px var(--ts-focus);

  /* --- 7. Motion --------------------------------------------------------- */
  --ts-duration-instant: 90ms;
  --ts-duration-fast: 150ms;
  --ts-duration-base: 220ms;
  --ts-duration-slow: 340ms;
  --ts-ease: cubic-bezier(0.2, 0, 0.2, 1);      /* the house curve */
  --ts-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ts-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- 8. Dark theme -------------------------------------------------------
   Gold gains contrast on dark (7.2:1), so it may finally be used as an ink.
   Surfaces lift with warm greys rather than shadows. */
:root[data-theme="dark"],
:root:not([data-theme="light"]) .ts-dark {
  color-scheme: dark;
  --ts-surface: #26241F;
  --ts-surface-sunken: #1C1A18;
  --ts-surface-raised: #322F2B;
  --ts-surface-inverse: var(--ts-white);
  --ts-surface-warm: #3A342A;
  --ts-surface-hover: #3A3733;

  --ts-text: #F4F2F0;
  --ts-text-muted: #BEB9B5;
  --ts-text-subtle: #9E9894;
  --ts-text-inverse: var(--ts-black);

  --ts-border: rgba(244, 242, 240, 0.16);
  --ts-border-strong: rgba(244, 242, 240, 0.32);
  --ts-border-hairline: rgba(244, 242, 240, 0.10);

  --ts-accent: var(--ts-gold);
  --ts-focus: var(--ts-gold);

  /* Lifted so status text and invalid-input borders stay legible on dark;
     all four clear 4.5:1 on both --ts-surface and --ts-surface-raised. */
  --ts-success: #8FBF7F;   /* 7.33:1 */
  --ts-warning: #E8B75C;   /* 8.39:1 */
  --ts-danger:  #E8897A;   /* 6.12:1 */
  --ts-info:    #8FB3C7;   /* 6.97:1 */

  --ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
  --ts-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.32);
  --ts-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.48);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ts-surface: #26241F;
    --ts-surface-sunken: #1C1A18;
    --ts-surface-raised: #322F2B;
    --ts-surface-inverse: var(--ts-white);
    --ts-surface-warm: #3A342A;
    --ts-surface-hover: #3A3733;
    --ts-text: #F4F2F0;
    --ts-text-muted: #BEB9B5;
    --ts-text-subtle: #9E9894;
    --ts-text-inverse: var(--ts-black);
    --ts-border: rgba(244, 242, 240, 0.16);
    --ts-border-strong: rgba(244, 242, 240, 0.32);
    --ts-border-hairline: rgba(244, 242, 240, 0.10);
    --ts-focus: var(--ts-gold);
    --ts-success: #8FBF7F;
    --ts-warning: #E8B75C;
    --ts-danger:  #E8897A;
    --ts-info:    #8FB3C7;
    --ts-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
    --ts-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.32);
    --ts-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.48);
  }
}

/* --- 9. Base element styles ---------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ts-surface);
  color: var(--ts-text);
  font-family: var(--ts-font-body);
  font-size: var(--ts-text-lg);
  line-height: var(--ts-leading-relaxed);
  letter-spacing: var(--ts-track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ts-font-display);
  font-weight: var(--ts-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--ts-track-display);
  line-height: var(--ts-leading-tight);
  color: var(--ts-text);
  margin: 0 0 var(--ts-space-4);
  /* Tracking adds space after the last letter; pull it back so headings
     stay optically aligned to the left edge of the column. */
  margin-right: calc(var(--ts-track-display) * -1);
}

h1 { font-size: clamp(2.25rem, 5vw, var(--ts-text-5xl)); }
h2 { font-size: clamp(1.75rem, 3.5vw, var(--ts-text-3xl)); }
h3 { font-size: var(--ts-text-2xl); }
h4 { font-size: var(--ts-text-xl); }
h5, h6 { font-size: var(--ts-text-md); letter-spacing: var(--ts-track-display); }

p { margin: 0 0 var(--ts-space-4); max-width: var(--ts-measure); }

a {
  color: var(--ts-text);
  text-decoration-color: var(--ts-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--ts-duration-fast) var(--ts-ease);
}
a:hover { text-decoration-color: var(--ts-text); }

hr {
  border: 0;
  border-top: 1px solid var(--ts-border-hairline);
  margin: var(--ts-space-7) 0;
}

img, svg, video { max-width: 100%; height: auto; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ts-focus);
  outline-offset: 2px;
  border-radius: var(--ts-radius-sm);
}

::selection { background: var(--ts-gold); color: var(--ts-black); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 10. Signature utilities --------------------------------------------- */

/* The gold eyebrow: `<p class="ts-eyebrow">crafted by hand</p>`
   Em dashes are added automatically so the device stays consistent.

   The device is at its best on a dark ground, where true Teaspoon Gold is legal
   (7.2:1). On light grounds gold cannot be an ink at this size, so the default
   here is Teaspoon Black with gold carried by the dashes instead — the gesture
   survives, the text stays readable. Muted Gold Three is only 2.6:1 on white and
   must never be used for eyebrow text. */
.ts-eyebrow {
  font-family: var(--ts-font-body);
  font-size: var(--ts-text-sm);
  font-weight: var(--ts-weight-regular);
  text-transform: lowercase;
  letter-spacing: var(--ts-track-display);
  color: var(--ts-text);
  margin: 0 0 var(--ts-space-4);
}
.ts-eyebrow::before { content: "— "; color: var(--ts-muted-gold-3); }
.ts-eyebrow::after  { content: " —"; color: var(--ts-muted-gold-3); }
/* On dark grounds the whole line becomes true brand gold. */
.ts-on-dark .ts-eyebrow,
.ts-on-dark .ts-eyebrow::before,
.ts-on-dark .ts-eyebrow::after,
:root[data-theme="dark"] .ts-eyebrow,
:root[data-theme="dark"] .ts-eyebrow::before,
:root[data-theme="dark"] .ts-eyebrow::after { color: var(--ts-gold); }

/* The script band: one line of Alisha on Muted Gold Two. Use once per page.

   The printed guide sets this line in white, but white on Muted Gold Two measures
   2.0:1 — below even the 3:1 large-text floor, so it fails as rendered text. The
   band is kept exactly as designed and the script is set in Teaspoon Black instead
   (6.7:1). If a designer explicitly wants the guide's white for a decorative
   treatment where the words also appear elsewhere, override .ts-script-band and
   mark it aria-hidden so nobody depends on reading it. */
.ts-script-band {
  background: var(--ts-muted-gold-2);
  color: var(--ts-black);
  font-family: var(--ts-font-script);
  font-size: clamp(1.75rem, 4vw, var(--ts-text-4xl));
  letter-spacing: var(--ts-track-script);
  line-height: 1.3;
  text-align: center;
  padding: var(--ts-space-5) var(--ts-gutter);
}

/* The editorial split: quiet title panel beside a generous content field. */
.ts-split {
  display: grid;
  grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
  min-height: 100%;
}
.ts-split > :first-child {
  background: var(--ts-surface-sunken);
  padding: var(--ts-space-8) var(--ts-space-7);
}
.ts-split > :last-child { padding: var(--ts-space-8) var(--ts-space-7); }
@media (max-width: 768px) {
  .ts-split { grid-template-columns: 1fr; }
  .ts-split > * { padding: var(--ts-space-6) var(--ts-space-5); }
}

/* The left rail: hairline, rotated caption, page number. */
.ts-rail {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ts-font-display);
  font-size: var(--ts-text-2xs);
  letter-spacing: var(--ts-track-display);
  color: var(--ts-text-subtle);
  border-right: 1px solid var(--ts-border-hairline);
  padding: var(--ts-space-4) var(--ts-space-2);
}

.ts-container { max-width: var(--ts-container); margin-inline: auto; padding-inline: var(--ts-gutter); }
.ts-narrow    { max-width: var(--ts-container-narrow); margin-inline: auto; padding-inline: var(--ts-gutter); }
.ts-section   { padding-block: clamp(var(--ts-space-7), 8vw, var(--ts-space-9)); }
.ts-stack > * + * { margin-top: var(--ts-space-4); }
.ts-lede { font-family: var(--ts-font-display); font-size: var(--ts-text-xl); line-height: var(--ts-leading-normal); color: var(--ts-text-muted); }