/* tokens.css — V4 "Quiet Premium Editorial Commerce", light-first warm ivory
   palette (owner spec 2026-09-19). Source of truth: docs/DESIGN.md.
   Home surface tokens (round 8): every homepage section background is a
   token, never a hardcoded light value — dark theme swaps them wholesale. */
:root {
  --canvas: #F7F5EF;
  --surface: #FFFEFA;
  --surface-2: #F8F8F3;
  --surface-soft: #F0F2EC;
  --ink: #151815;
  --ink-soft: #3C443E;
  --muted: #667069;
  --hairline: rgba(20, 32, 25, 0.10);
  --hairline-soft: rgba(20, 32, 25, 0.08);
  --brand: #0B6B49;
  --brand-deep: #073D2E;
  --brand-ink: #FFFFFF;
  --secondary-cta-ink: #073D2E;
  --mint: #DDF3E8;
  --mint-ink: #0B6B49;
  --lime-soft: #EAF8BD;
  --warm: #F3E8D5;
  --warn: #A05A00;
  --dark-surface: #0C1712;
  --dark-ink: #E9EFE9;
  --dark-muted: #A9B6AB;
  --shadow-pop: 0 16px 50px rgba(20, 35, 25, 0.07);
  --r-card: 16px;
  --r-tile: 20px;
  --r-line: 8px;
  --r-chip: 999px;
  --t-fast: 150ms;
  --t-med: 200ms;
  --font-display: "Instrument Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  /* Desktop layout contract: commerce surfaces scale with the viewport instead
     of being trapped in a 1320px editorial container. Reading surfaces set
     their own smaller caps in article/guide/base CSS. */
  --wrap-max: 1920px;
  --wrap-pad: clamp(20px, 2.25vw, 48px);
  --reading-max: 920px;
  --guide-max: 1360px;

  /* Home section surfaces + featured/guide tints (light) */
  --home-featured-bg: #FFFEFA;
  --home-category-bg: #F0F2EC;
  --home-guide-bg: #F5EFE4;
  --feat-mint-a: #E9F6EF;
  --feat-mint-b: #F7FCF8;
  --feat-warm-a: #F7F0E1;
  --feat-warm-b: #FCF9F2;
  --feat-cool-a: #EEF2EC;
  --feat-cool-b: #F8FAF5;
  --guide-media-1-a: #E9F6EF;
  --guide-media-1-b: #FBFDF9;
  --guide-media-2-a: #F7F0E1;
  --guide-media-2-b: #FCF9F2;
  --guide-media-3-a: #E9F0EA;
  --guide-media-3-b: #F8FAF5;
  --card-translucent: rgba(255, 254, 250, 0.55);
  --image-well-a: #FFFFFF;
  --image-well-b: #F4F4EF;
}
:root[data-theme="dark"] {
  --canvas: #0E120F;
  --surface: #161B17;
  --surface-2: #191E1A;
  --surface-soft: #1C221E;
  --ink: #EDEFEA;
  --ink-soft: #B9C1B8;
  --muted: #98A49A;
  --hairline: rgba(230, 240, 232, 0.12);
  --hairline-soft: rgba(230, 240, 232, 0.08);
  --brand: #3FC98C;
  --brand-deep: #1C5C42;
  --brand-ink: #06281A;
  --secondary-cta-ink: #78E0B1;
  --mint: #123527;
  --mint-ink: #3FC98C;
  --warn: #FFB454;

  /* Home section surfaces + featured/guide tints (dark equivalents,
     same hue families, no pure black) */
  --home-featured-bg: #111713;
  --home-category-bg: #171E19;
  --home-guide-bg: #131914;
  --feat-mint-a: #163126;
  --feat-mint-b: #17251E;
  --feat-warm-a: #29251C;
  --feat-warm-b: #211F19;
  --feat-cool-a: #1C241F;
  --feat-cool-b: #171D19;
  --guide-media-1-a: #173126;
  --guide-media-1-b: #1C2821;
  --guide-media-2-a: #2B261D;
  --guide-media-2-b: #211E19;
  --guide-media-3-a: #1E2721;
  --guide-media-3-b: #191F1B;
  --card-translucent: rgba(28, 34, 30, 0.78);
  --image-well-a: #252A26;
  --image-well-b: #1B201C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas: #0E120F;
    --surface: #161B17;
    --surface-2: #191E1A;
    --surface-soft: #1C221E;
    --ink: #EDEFEA;
    --ink-soft: #B9C1B8;
    --muted: #98A49A;
    --hairline: rgba(230, 240, 232, 0.12);
    --hairline-soft: rgba(230, 240, 232, 0.08);
    --brand: #3FC98C;
    --brand-deep: #1C5C42;
    --brand-ink: #06281A;
    --secondary-cta-ink: #78E0B1;
    --mint: #123527;
    --mint-ink: #3FC98C;
    --warn: #FFB454;
    --home-featured-bg: #111713;
    --home-category-bg: #171E19;
    --home-guide-bg: #131914;
    --feat-mint-a: #163126;
    --feat-mint-b: #17251E;
    --feat-warm-a: #29251C;
    --feat-warm-b: #211F19;
    --feat-cool-a: #1C241F;
    --feat-cool-b: #171D19;
    --guide-media-1-a: #173126;
    --guide-media-1-b: #1C2821;
    --guide-media-2-a: #2B261D;
    --guide-media-2-b: #211E19;
    --guide-media-3-a: #1E2721;
    --guide-media-3-b: #191F1B;
    --card-translucent: rgba(28, 34, 30, 0.78);
    --image-well-a: #252A26;
    --image-well-b: #1B201C;
  }
}