/* ─────────────────────────────────────────────────────────────
 * Mero — design tokens as CSS custom properties.
 * Drop this into your app root. Dark-mode-first.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ── Brand palette (locked) ─────────────────────────────── */
  --mero-color-ink:       #0F1F3A;
  --mero-color-amber:     #F4B223;
  --mero-color-stone:     #F5F2EA;
  --mero-color-graphite:  #5C6678;
  --mero-color-blue:      #2563FF;  /* data only */
  --mero-color-green:     #5F8A63;  /* semantic only */
  --mero-color-bg:        #060F18;  /* brand stage */
  --mero-color-stem:      #EBE5D8;  /* Plumb stem only */

  /* ── Semantic surfaces (dark-first) ─────────────────────── */
  --mero-surface-canvas:       var(--mero-color-bg);
  --mero-surface-base:         var(--mero-color-ink);
  --mero-surface-raised:       #152844;
  --mero-surface-sunken:       var(--mero-color-bg);
  --mero-surface-light-base:   var(--mero-color-stone);
  --mero-surface-light-raised: #FFFFFF;

  /* ── Text ───────────────────────────────────────────────── */
  --mero-text-primary:   #F5F2EA;
  --mero-text-secondary: rgba(245, 242, 234, 0.72);
  --mero-text-tertiary:  rgba(245, 242, 234, 0.55);
  --mero-text-muted:     rgba(245, 242, 234, 0.40);
  --mero-text-disabled:  rgba(245, 242, 234, 0.25);
  --mero-text-accent:    #F4B223;
  --mero-text-on-amber:  #0F1F3A;
  --mero-text-on-light:  #0F1F3A;

  /* ── Borders ────────────────────────────────────────────── */
  --mero-border-hairline: rgba(245, 242, 234, 0.08);
  --mero-border-default:  rgba(245, 242, 234, 0.12);
  --mero-border-strong:   rgba(245, 242, 234, 0.20);
  --mero-border-amber:    #F4B223;
  --mero-border-amber-soft: rgba(244, 178, 35, 0.35);

  /* ── State ──────────────────────────────────────────────── */
  --mero-state-active:     #F4B223;
  --mero-state-selected:   #F4B223;
  --mero-state-hover:      rgba(245, 242, 234, 0.04);
  --mero-state-pressed:    rgba(245, 242, 234, 0.08);
  --mero-state-disabled-bg:rgba(245, 242, 234, 0.06);
  --mero-state-success:    #5F8A63;
  --mero-state-info:       #2563FF;
  --mero-state-warning:    #F4B223;
  --mero-state-error:      #C64D3F;

  /* ── Food-support palette (illustration only) ───────────── */
  --mero-food-roast:     #C9622E;
  --mero-food-grain:     #E8A94A;
  --mero-food-cream:     #F4E4B8;
  --mero-food-leaf:      #7FA05B;
  --mero-food-herb:      #3D6B4A;
  --mero-food-tomato:    #B8443A;
  --mero-food-aubergine: #6B4A8C;
  --mero-food-shadow:    #2A3A52;

  /* ── Typography ─────────────────────────────────────────── */
  --mero-font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --mero-font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mero-font-mono:    'IBM Plex Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  --mero-weight-regular: 400;
  --mero-weight-medium:  500;
  --mero-weight-semi:    600;
  --mero-weight-bold:    700;

  --mero-tracking-display: -0.02em;
  --mero-tracking-title:   -0.01em;
  --mero-tracking-body:     0;
  --mero-tracking-button:   0.12em;
  --mero-tracking-mono:     0.20em;
  --mero-tracking-mono-meta:0.08em;
  --mero-tracking-wordmark: 0.03em;

  /* ── Spacing (4-based) ──────────────────────────────────── */
  --mero-space-0:   0;
  --mero-space-1:   4px;
  --mero-space-2:   8px;
  --mero-space-3:  12px;
  --mero-space-4:  16px;
  --mero-space-5:  20px;
  --mero-space-6:  24px;
  --mero-space-8:  32px;
  --mero-space-10: 40px;
  --mero-space-12: 48px;
  --mero-space-16: 64px;
  --mero-space-20: 80px;
  --mero-space-24: 96px;

  /* ── Radii ──────────────────────────────────────────────── */
  --mero-radius-none:    0;
  --mero-radius-xs:      3px;
  --mero-radius-chip:    6px;
  --mero-radius-input:  10px;
  --mero-radius-card:   16px;
  --mero-radius-surface:20px;
  --mero-radius-pill:  100px;
  --mero-radius-tile:   22%;
  --mero-radius-icon:   17%;
  --mero-radius-circle: 50%;

  /* ── Shadows ────────────────────────────────────────────── */
  --mero-shadow-none:    none;
  --mero-shadow-subtle: 0 1px 2px rgba(0, 0, 0, 0.18);
  --mero-shadow-card:   0 2px 12px rgba(0, 0, 0, 0.30);
  --mero-shadow-raised: 0 6px 24px rgba(0, 0, 0, 0.40);
  --mero-shadow-logo:   0 2px 12px rgba(0, 0, 0, 0.50);
  --mero-focus-ring:    0 0 0 2px #F4B223, 0 0 0 4px #0F1F3A;

  /* ── Motion ─────────────────────────────────────────────── */
  --mero-duration-instant:  80ms;
  --mero-duration-fast:    150ms;
  --mero-duration-default: 220ms;
  --mero-duration-slow:    320ms;
  --mero-duration-content: 480ms;
  --mero-duration-screen:  640ms;

  --mero-ease-standard:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --mero-ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --mero-ease-accelerate: cubic-bezier(0.4, 0.0, 1.0, 1.0);
  --mero-ease-editorial:  cubic-bezier(0.25, 0.1, 0.25, 1.0);

  /* ── Layout ─────────────────────────────────────────────── */
  --mero-max-content: 1200px;
  --mero-gutter-mobile:  20px;
  --mero-gutter-tablet:  28px;
  --mero-gutter-desktop: 40px;
  --mero-touch-min: 44px;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mero-duration-instant:  0ms;
    --mero-duration-fast:    80ms;
    --mero-duration-default: 80ms;
    --mero-duration-slow:    80ms;
    --mero-duration-content: 80ms;
    --mero-duration-screen:  80ms;
    --mero-ease-standard:    linear;
    --mero-ease-decelerate:  linear;
    --mero-ease-accelerate:  linear;
    --mero-ease-editorial:   linear;
  }
}

/* ── Light mode variant (opt-in via [data-theme="light"]) ── */
[data-theme="light"] {
  --mero-surface-canvas:       var(--mero-color-stone);
  --mero-surface-base:         var(--mero-color-stone);
  --mero-surface-raised:       #FFFFFF;
  --mero-surface-sunken:       #EEEAE0;

  --mero-text-primary:   #0F1F3A;
  --mero-text-secondary: rgba(15, 31, 58, 0.70);
  --mero-text-tertiary:  rgba(15, 31, 58, 0.55);
  --mero-text-muted:     rgba(15, 31, 58, 0.40);
  --mero-text-disabled:  rgba(15, 31, 58, 0.25);
  --mero-text-on-amber:  #0F1F3A;

  --mero-border-hairline: rgba(15, 31, 58, 0.08);
  --mero-border-default:  rgba(15, 31, 58, 0.14);
  --mero-border-strong:   rgba(15, 31, 58, 0.24);

  --mero-focus-ring: 0 0 0 2px #F4B223, 0 0 0 4px #F5F2EA;
}