/* pickles — design tokens, CSS custom properties
 * Source of truth: tokens.json. Keep this file in sync by hand, or generate
 * via Style Dictionary / Tokens Studio. Import once at the app root:
 *   @import "./design-system/tokens.css";
 */

:root {
  /* ── Color · brand ────────────────────────────────────────── */
  --color-brand-primary: #3E7D4F;
  --color-brand-primary-hover: #336A42;
  --color-brand-primary-press: #284F33;
  --color-brand-deep: #1F4A2E;
  --color-brand-soft: #E8F0E3;
  --color-brand-wash: #F4F7F1;
  --color-brand-heritage: #E94E1B; /* Spice Factory lineage — reserved */

  /* ── Color · accent ───────────────────────────────────────── */
  --color-accent-mustard: #F5B544;
  --color-accent-mustard-soft: #FBEFD2;

  /* ── Color · semantic ─────────────────────────────────────── */
  --color-success: #3E7D4F;
  --color-success-soft: #E8F0E3;
  --color-warning: #C08A2E;
  --color-warning-soft: #FAF3E2;
  --color-danger: #B8391F;
  --color-danger-soft: #FBEAE4;
  --color-info: #3D6B8C;
  --color-info-soft: #E6EFF5;

  /* ── Color · surface ──────────────────────────────────────── */
  --color-surface-page: #FAF9F5;
  --color-surface-paper: #FFFFFF;
  --color-surface-sunken: #F2F0E9;
  --color-line: #E5E2D8;
  --color-line-soft: #EEECE3;
  --color-line-strong: #C9C5B7;

  /* ── Color · text ─────────────────────────────────────────── */
  --color-text-ink: #1A1D1A;
  --color-text-body: #2F332F;
  --color-text-muted: #6B6E66;
  --color-text-faint: #9A9D93;
  --color-text-on-primary: #FAF9F5;
  --color-text-on-dark: #FAF9F5;

  /* ── Color · data viz (walk in order) ─────────────────────── */
  --color-series-1: #3E7D4F;
  --color-series-2: #F5B544;
  --color-series-3: #3D6B8C;
  --color-series-4: #B8391F;
  --color-series-5: #7A5FA5;
  --color-series-6: #6B8E23;
  --color-series-7: #C08A2E;
  --color-series-8: #4A9E9E;

  /* ── Font families ────────────────────────────────────────── */
  --font-display: "Nunito", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-body:    "Inter", "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Source Han Code JP", ui-monospace, monospace;
  --font-jp:      "Noto Sans JP", "Hiragino Sans", sans-serif;

  /* ── Font size scale ──────────────────────────────────────── */
  --fs-xs:   11px; --lh-xs:   1.4;
  --fs-sm:   12px; --lh-sm:   1.5;
  --fs-base: 14px; --lh-base: 1.6;
  --fs-md:   15px; --lh-md:   1.6;
  --fs-lg:   17px; --lh-lg:   1.5;
  --fs-xl:   20px; --lh-xl:   1.4;
  --fs-2xl:  24px; --lh-2xl:  1.35;
  --fs-3xl:  30px; --lh-3xl:  1.25;
  --fs-4xl:  38px; --lh-4xl:  1.15;
  --fs-5xl:  48px; --lh-5xl:  1.1;
  --fs-6xl:  60px; --lh-6xl:  1.05;

  /* ── Weights & tracking ───────────────────────────────────── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ── Radius ───────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* ── Space (4-step base) ──────────────────────────────────── */
  --space-0:  0;
  --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;

  /* ── Shadow ───────────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(26, 29, 26, 0.04);
  --shadow-sm: 0 1px 3px rgba(26, 29, 26, 0.06), 0 1px 2px rgba(26, 29, 26, 0.04);
  --shadow-md: 0 4px 12px rgba(26, 29, 26, 0.06), 0 2px 4px rgba(26, 29, 26, 0.04);
  --shadow-lg: 0 12px 32px rgba(26, 29, 26, 0.08), 0 4px 8px rgba(26, 29, 26, 0.04);
  --shadow-focus: 0 0 0 3px rgba(62, 125, 79, 0.25);

  /* ── Motion ───────────────────────────────────────────────── */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-entrance: cubic-bezier(0, 0, 0, 1);
  --easing-exit:     cubic-bezier(0.3, 0, 1, 1);

  /* ── Z-index scale ────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* Dark mode — reserved hook. Phase 2. Override the variables that matter
 * on a [data-theme="dark"] ancestor; do not duplicate every token. */
[data-theme="dark"] {
  --color-surface-page: #121410;
  --color-surface-paper: #1A1D1A;
  --color-surface-sunken: #0E100D;
  --color-line: #2A2E2A;
  --color-line-soft: #202320;
  --color-line-strong: #3B3F3A;
  --color-text-ink: #F4F3EE;
  --color-text-body: #DAD8CF;
  --color-text-muted: #9A9D93;
  --color-text-faint: #6B6E66;
  --color-brand-soft: #1E2A21;
  --color-brand-wash: #162019;
}

/* Sensible base so tokens "just work" if imported alone */
html { font-family: var(--font-body); color: var(--color-text-ink); background: var(--color-surface-page); }
body { font-size: var(--fs-base); line-height: var(--lh-base); }
*, *::before, *::after { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); }