/* ─────────────────────────────────────────────────────────────────
   Pebble & Silver — Design Tokens
   Drop this :root block into your global stylesheet.
   Reference tokens via var(--token-name). Never hardcode values.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Brand ───────────────────────────────────────────── */
  --color-green:        #336633;  /* Pebble Green — primary brand */
  --color-green-deep:   #1f4220;  /* Deep Moss — body text on green (AAA) */
  --color-green-soft:   #5a8a5a;  /* Sage — secondary accent, muted */
  --color-ochre:        #b8732a;  /* Field Ochre — display only, fails AA at body */
  --color-rust:         #9a4a2a;  /* Iron Rust — editorial accent, "don't" indicators */

  /* ── Color · Neutrals ────────────────────────────────────────── */
  --color-ink:          #1a1d1a;  /* primary text */
  --color-stone:        #6b6e68;  /* secondary text, captions */
  --color-bone:         #ffffff;  /* primary surface (white) */
  --color-paper:        #fafafa;  /* card surface */
  --color-mist:         #f5f6f5;  /* tinted surface — marketing banding only */

  /* ── Color · Signal palette (semantic, never decorative) ─────── */
  --signal-error:        #b03030;  /* validation, destructive, system errors */
  --signal-error-tint:   #fbeceb;
  --signal-warning:      #c89a2a;  /* preliminary data, advisory */
  --signal-warning-tint: #faf2dc;
  --signal-link:         #3a5a78;  /* inline links, info banners, "Updated" tag */
  --signal-link-tint:    #eaf0f5;
  --signal-success:      #2d6a3a;  /* confirmation, save success */
  --signal-success-tint: #e6efe4;

  /* ── Spacing (4px base) ──────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radius — sharp corners, every surface ───────────────────── */
  --radius: 0;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border-hairline: 1px solid rgba(26,29,26,0.10);
  --border-default:  1px solid rgba(26,29,26,0.18);
  --border-emphasis: 1.5px solid var(--color-ink);
  --border-brand:    2px solid var(--color-green);

  /* ── Shadows (use sparingly — borders are preferred) ─────────── */
  --shadow-1: 0 1px 2px rgba(26,29,26,.06), 0 1px 1px rgba(26,29,26,.04);
  --shadow-2: 0 4px 12px rgba(26,29,26,.08), 0 2px 4px rgba(26,29,26,.04);
  --shadow-3: 0 12px 32px rgba(26,29,26,.12), 0 4px 12px rgba(26,29,26,.06);

  /* ── Breakpoints (consume via media queries) ─────────────────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1600px;

  /* ── Containers ──────────────────────────────────────────────── */
  --container-text: 680px;   /* long-form reading width */
  --container:      1280px;  /* default page max */
  --container-wide: 1600px;  /* hero / data-viz / map */

  /* ── Motion ──────────────────────────────────────────────────── */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
  --ease-exit:        cubic-bezier(0.4, 0, 1, 1);

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-sticky:   100;
  --z-dropdown: 1000;
  --z-overlay:  1100;
  --z-modal:    1200;
  --z-toast:    1300;

  /* ── Type families ───────────────────────────────────────────── */
  --font-serif: "Crimson Pro", Georgia, serif;
  --font-body:  "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ── Type scale (rem, base = 16px) ───────────────────────────── */
  --text-mono-xs:   0.625rem;  /* 10px — eyebrow, kicker */
  --text-mono-sm:   0.6875rem; /* 11px — UI labels */
  --text-body-xs:   0.75rem;   /* 12px — caption */
  --text-body-sm:   0.8125rem; /* 13px — secondary */
  --text-body:      1rem;      /* 16px — body */
  --text-body-lg:   1.125rem;  /* 18px — lead */
  --text-display-1: 1.5rem;    /* 24px */
  --text-display-2: 2rem;      /* 32px */
  --text-display-3: 2.75rem;   /* 44px */
  --text-display-4: 4rem;      /* 64px — hero */

  /* ── Type weights ────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Letter-spacing ──────────────────────────────────────────── */
  --tracking-tight:  -0.025em;  /* large display serif */
  --tracking-snug:   -0.01em;   /* mid serif, body */
  --tracking-normal: 0;
  --tracking-wide:   0.18em;    /* small mono UI labels */
  --tracking-wider:  0.32em;    /* eyebrow / kicker */
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast:    1ms;
    --duration-base:    1ms;
    --duration-slow:    1ms;
  }
}