/* suneater design tokens - GENERATED, do not edit.
 *
 * Source: assets/design-tokens.json, which encodes docs/brand-guidelines.md.
 * Rebuild: node assets/build-tokens.cjs
 *
 * Three layers. Primitives are raw values and change rarely. Semantic tokens
 * assign meaning and are the only layer a theme touches. Component tokens hang
 * off semantic ones, so a theme switch reaches them for free.
 *
 * The brand is dark-first: :root is the dark ground, and .light is the
 * deviation. Scope is web only - mobile apps are exempt from the brand.
 */

/* === PRIMITIVE === raw values, no meaning attached */
:root {
  --primitive-color-graphite: #0E1011;  /* The ground */
  --primitive-color-slate: #181B1C;  /* Raised surface */
  --primitive-color-slate-lift: #222627;  /* Cards on Slate */
  --primitive-color-rule: #2E3334;  /* Borders on dark */
  --primitive-color-chalk: #D5D8D6;  /* Body text on dark */
  --primitive-color-ash: #8D938F;  /* Muted on dark */
  --primitive-color-paper: #E9EBE6;  /* Light ground, cool not cream */
  --primitive-color-card: #F6F7F4;  /* Cards on Paper */
  --primitive-color-rule-light: #D3D7D0;  /* Borders on light */
  --primitive-color-slate600: #4E5453;  /* Muted on light */
  --primitive-color-sodium: #C8D14A;  /* The accent. Dark grounds only - 1.38:1 on Paper */
  --primitive-color-sodium-deep: #5E6613;  /* The accent where the ground is light */
  --primitive-color-sodium-glow: #DDE566;  /* Hover and active on dark, never at rest */
  --primitive-color-teal: #4E9E85;
  --primitive-color-teal-deep: #2A6B59;
  --primitive-color-amber: #D4711A;
  --primitive-color-amber-deep: #8F5410;
  --primitive-color-red: #D0574A;
  --primitive-color-red-deep: #9E3226;
  --primitive-color-blue: #5C93BF;
  --primitive-color-blue-deep: #2A5C7E;
  --primitive-color-sodium-dim: rgba(200,209,74,0.10);
  --primitive-color-sodium-mid: rgba(200,209,74,0.25);
  --primitive-color-sodium-deep-dim: rgba(94,102,19,0.08);
  --primitive-color-sodium-deep-mid: rgba(94,102,19,0.20);
  --primitive-color-ash-faint: #5A605D;  /* Faint on dark */
  --primitive-color-ash-faint-light: #949A93;  /* Faint on light */
  --primitive-color-rule-strong: rgba(255,255,255,0.16);
  --primitive-color-rule-strong-light: rgba(14,16,17,0.18);
  --primitive-space-1: 4px;
  --primitive-space-2: 8px;
  --primitive-space-3: 12px;
  --primitive-space-4: 16px;
  --primitive-space-5: 20px;
  --primitive-space-6: 24px;
  --primitive-space-8: 32px;
  --primitive-space-10: 40px;
  --primitive-space-12: 48px;
  --primitive-space-16: 64px;
  --primitive-font-size-caption: 12.5px;  /* The floor. Never smaller */
  --primitive-font-size-small: 14px;
  --primitive-font-size-body: 16px;
  --primitive-font-size-h3: 19px;
  --primitive-font-size-h2: 24px;
  --primitive-font-size-h1: 34px;
  --primitive-font-size-display: 48px;
  --primitive-font-size-display-xl: min(clamp(52px, 15vw, 124px), 26vh);  /* Fluid, capped against viewport height. One element per page */
  --primitive-line-height-display: 1.05;
  --primitive-line-height-h1: 1.15;
  --primitive-line-height-h2: 1.25;
  --primitive-line-height-h3: 1.3;
  --primitive-line-height-caption: 1.45;
  --primitive-line-height-small: 1.5;
  --primitive-line-height-body: 1.6;
  --primitive-font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, ui-monospace, monospace;
  --primitive-font-family-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --primitive-letter-spacing-display: -0.02em;
  --primitive-letter-spacing-label: 0.16em;
  --primitive-radius-sm: 10px;  /* Chips, inputs */
  --primitive-radius-md: 16px;  /* Inner panels */
  --primitive-radius-lg: 24px;  /* Cards */
  --primitive-radius-xl: 28px;  /* Hero cards */
  --primitive-radius-pill: 999px;
  --primitive-duration-fast: 150ms;
  --primitive-duration-slow: 300ms;
  --primitive-easing-enter: ease-out;
  --primitive-size-touch: 44px;  /* Minimum touch target */
}

/* === SEMANTIC === meaning. The only layer a theme redefines. */
:root {
  --color-bg: var(--primitive-color-graphite);
  --color-surface: var(--primitive-color-slate);
  --color-surface-raised: var(--primitive-color-slate-lift);
  --color-border: var(--primitive-color-rule);
  --color-text: var(--primitive-color-chalk);
  --color-text-muted: var(--primitive-color-ash);
  --color-accent: var(--primitive-color-sodium);
  --color-accent-hover: var(--primitive-color-sodium-glow);
  --color-on-accent: var(--primitive-color-graphite);  /* Text on an accent fill. 11.51:1 */
  --color-success: var(--primitive-color-teal);
  --color-warning: var(--primitive-color-amber);
  --color-danger: var(--primitive-color-red);
  --color-info: var(--primitive-color-blue);
  --color-accent-dim: var(--primitive-color-sodium-dim);
  --color-accent-mid: var(--primitive-color-sodium-mid);
  --color-text-faint: var(--primitive-color-ash-faint);
  --color-border-strong: var(--primitive-color-rule-strong);
  --font-display: var(--primitive-font-family-mono);  /* Titles, labels, numerals */
  --font-body: var(--primitive-font-family-sans);  /* Anything read as a sentence */
  --space-component-padding: var(--primitive-space-4);
  --space-section-gap: var(--primitive-space-8);
}

/* === COMPONENT === built from semantic, so theming reaches them for free */
:root {
  --button-min-size: var(--primitive-size-touch);
  --button-radius: var(--primitive-radius-pill);
  --button-font-size: var(--primitive-font-size-small);
  --button-primary-bg: var(--color-accent);
  --button-primary-fg: var(--color-on-accent);
  --button-primary-bg-hover: var(--color-accent-hover);
  --button-secondary-bg: var(--color-surface-raised);
  --button-secondary-fg: var(--color-text);
  --button-ghost-border: var(--color-border);
  --button-danger-bg: var(--color-danger);
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
  --card-radius: var(--primitive-radius-lg);
  --card-padding: var(--primitive-space-5);
  --label-font: var(--font-display);
  --label-font-size: var(--primitive-font-size-caption);
  --label-letter-spacing: var(--primitive-letter-spacing-label);
  --label-color: var(--color-text-muted);
  --icon-stroke-width: 1.9;
  --icon-viewport: 24;
  --motion-duration: var(--primitive-duration-fast);
  --motion-easing: var(--primitive-easing-enter);
  --focus-ring: var(--color-accent);
  --focus-width: 2px;
  --focus-offset: 3px;
}

/* === LIGHT GROUND ===
 * Sodium is 1.38:1 on Paper - invisible - so the accent re-points to Sodium
 * Deep here rather than being reused. Same for every semantic pair.
 * Applies to .light or [data-theme="light"] on any ancestor. */
.light,
[data-theme="light"] {
  --color-bg: var(--primitive-color-paper);
  --color-surface: var(--primitive-color-card);
  --color-surface-raised: var(--primitive-color-paper);
  --color-border: var(--primitive-color-rule-light);
  --color-text: var(--primitive-color-graphite);
  --color-text-muted: var(--primitive-color-slate600);
  --color-accent: var(--primitive-color-sodium-deep);
  --color-accent-hover: var(--primitive-color-sodium);
  --color-on-accent: var(--primitive-color-paper);
  --color-success: var(--primitive-color-teal-deep);
  --color-warning: var(--primitive-color-amber-deep);
  --color-danger: var(--primitive-color-red-deep);
  --color-info: var(--primitive-color-blue-deep);
  --color-accent-dim: var(--primitive-color-sodium-deep-dim);
  --color-accent-mid: var(--primitive-color-sodium-deep-mid);
  --color-text-faint: var(--primitive-color-ash-faint-light);
  --color-border-strong: var(--primitive-color-rule-strong-light);
}