/* ============================================================
   INTENT POP — FOUNDATION · tokens.css  (rebuild v2)
   The single source of truth. Three tiers:
     1. PRIMITIVES  --p-*       raw frozen brand values (Foundation only)
     2. SEMANTIC    --surface/--text/--border/--accent  (themes here)
     3. TREATMENT   --treat-*   brand behaviour
   No component may use a raw hex/px/bezier — use a token.
   Values extracted from: Brand Book §10.7–10.8, Motion §04, Imagery §03/§06.
   ============================================================ */

:root {
  /* ---- Brand color primitives (Brand Book §10.7 · frozen) ---- */
  --p-cream:     #F7F1E4;   /* canvas · 60% */
  --p-ink:       #1A140E;   /* type · 30% */
  --p-poppy:     #FF4A1C;   /* the accent · 8% */
  --p-pine:      #123A33;   /* contrast block */
  --p-ochre:     #E9A53C;   /* secondary */
  --p-warm-grey: #B7AE9A;   /* neutral */

  /* ---- Cream / ink working ramp ---- */
  --p-cream-50:  #FBF7EE;
  --p-cream-100: #F7F1E4;
  --p-cream-200: #ECE6D8;   /* sunken panel */
  --p-cream-300: #E2D7C2;
  --p-ink-900:   #000000;
  --p-ink-800:   #1A140E;
  --p-ink-700:   #221C15;   /* raised on ink */
  --p-ink-600:   #4A453C;   /* secondary text */
  --p-ink-400:   #8A8273;   /* tertiary text */
  --p-rule:      #D8D1C0;   /* hairline */
  --p-rule-2:    #C7BFAC;   /* stronger hairline */

  /* ---- Poppy ramp (500 frozen; rest derived for states) ---- */
  --p-poppy-700: #B23A1A;   /* poppy TEXT that passes on cream */
  --p-poppy-600: #E83C0F;   /* hover/pressed */
  --p-poppy-500: #FF4A1C;
  --p-poppy-300: #FF7A52;   /* poppy text/accent on ink */
  --p-poppy-tint:#FDE7DF;

  --p-pine-700:  #0D2A25;
  --p-pine-500:  #123A33;
  --p-pine-tint: #E2ECE8;
  --p-ochre-700: #B8791B;
  --p-ochre-500: #E9A53C;
  --p-ochre-tint:#F6ECD8;

  /* ---- Status ---- */
  --p-ok:#1B7A4B; --p-ok-bg:#E6F0E8;
  --p-warn:#B8791B; --p-warn-bg:#F6ECD8;
  --p-bad:#B23A2F; --p-bad-bg:#F4E2DD;
  --p-info:#123A33; --p-info-bg:#E2ECE8;

  /* ---- Data-viz sequence (Imagery §03) ---- */
  --p-d1:#FF4A1C; --p-d2:#1A140E; --p-d3:#123A33; --p-d4:#E9A53C; --p-d5:#B7AE9A;
  --p-d-grid:#D8D1C0;

  /* ---- Type families (Brand Book §10.8 · frozen) ---- */
  --p-font-display:"Bricolage Grotesque","Space Grotesk",system-ui,sans-serif;
  --p-font-body:"Instrument Sans",system-ui,sans-serif;
  --p-font-serif:"Newsreader",Georgia,serif;
  --p-font-mono:"JetBrains Mono",ui-monospace,monospace;

  /* ---- Weights ---- */
  --p-w-regular:400; --p-w-medium:500; --p-w-semibold:600; --p-w-bold:700; --p-w-extra:800;

  /* ---- Type scale (rem @16px base) ---- */
  --p-size-2xs:0.625rem;  /* 10 */
  --p-size-xs:0.6875rem;  /* 11 */
  --p-size-sm:0.8125rem;  /* 13 */
  --p-size-base:0.9375rem;/* 15 */
  --p-size-md:1.125rem;   /* 18 */
  --p-size-lg:1.375rem;   /* 22 */
  --p-size-xl:1.6875rem;  /* 27 */
  --p-size-2xl:2.125rem;  /* 34 */
  --p-size-3xl:2.875rem;  /* 46 */
  --p-size-4xl:3.75rem;   /* 60 */
  --p-size-5xl:5.5rem;    /* 88 */
  --p-size-6xl:9.5rem;    /* 152 */

  /* ---- Line height ---- */
  --p-lh-solid:0.86; --p-lh-tight:1; --p-lh-snug:1.14; --p-lh-normal:1.4; --p-lh-body:1.55; --p-lh-loose:1.7;

  /* ---- Tracking ---- */
  --p-track-display:-0.03em; --p-track-tight:-0.02em; --p-track-snug:-0.01em;
  --p-track-normal:0; --p-track-wide:0.06em; --p-track-eyebrow:0.12em; --p-track-caps:0.18em;
  --p-track-wordmark:-0.038em;   /* the wordmark lockup (Brand Book §10.1) */

  /* ---- Spacing (4px base) ---- */
  --p-space-1:0.25rem; --p-space-2:0.5rem; --p-space-3:0.75rem; --p-space-4:1rem;
  --p-space-5:1.5rem; --p-space-6:2rem; --p-space-7:3rem; --p-space-8:4rem;
  --p-space-9:6rem; --p-space-10:9.375rem;

  /* ---- Layout ---- */
  --p-container:1180px; --p-prose:64ch; --p-app-content:1440px; --p-sidebar:264px; --p-topbar:64px;

  /* ---- Radius ---- */
  --p-r-xs:5px; --p-r-sm:8px; --p-r-md:11px; --p-r-lg:16px; --p-r-xl:22px; --p-r-pill:999px;

  /* ---- Border widths ---- */
  --p-bw-hair:1px; --p-bw-rule:1.5px; --p-bw-marker:2px; --p-bw-stroke:2.5px;

  /* ---- Elevation (warm ink shadow) ---- */
  --p-sh-1:0 1px 2px rgba(26,20,14,.05);
  --p-sh-2:0 6px 18px -8px rgba(26,20,14,.18);
  --p-sh-3:0 22px 50px -18px rgba(26,20,14,.30);
  --p-sh-pop:0 6px 18px -8px rgba(255,74,28,.7);

  --p-focus-w:3px;

  /* ---- Motion (Motion §04 · frozen) ---- */
  --p-dur-micro:120ms; --p-dur-quick:200ms; --p-dur-base:320ms; --p-dur-pop:480ms; --p-dur-scene:680ms;
  --p-ease-standard:cubic-bezier(.2,.7,.2,1);
  --p-ease-pop:cubic-bezier(.34,1.56,.64,1);
  --p-ease-exit:cubic-bezier(.4,0,1,1);

  /* ---- Z-index ---- */
  --p-z-sticky:100; --p-z-dropdown:200; --p-z-drawer:300; --p-z-modal:400; --p-z-toast:500; --p-z-command:600;

  --p-scrim:rgba(26,20,14,.45);
  --p-blur-nav:blur(10px);

  /* ---- Icons (Imagery §06) ---- */
  --p-icon-sm:15px; --p-icon-md:17px; --p-icon-lg:22px; --p-icon-xl:28px;

  /* ---- Control heights ---- */
  --p-h-sm:34px; --p-h-md:44px; --p-h-lg:54px;
}

/* ============================================================
   SEMANTIC — light (default)
   ============================================================ */
:root, [data-theme="light"] {
  --surface-page:var(--p-cream);
  --surface-raised:#FFFFFF;
  --surface-sunken:var(--p-cream-200);
  --surface-inverse:var(--p-ink);
  --surface-pine:var(--p-pine);
  --surface-accent:var(--p-poppy);
  --surface-accent-subtle:var(--p-poppy-tint);

  --text-primary:var(--p-ink);
  --text-secondary:var(--p-ink-600);
  --text-muted:var(--p-ink-400);
  --text-faint:var(--p-rule-2);
  --text-inverse:var(--p-cream);
  --text-accent:var(--p-poppy-700);   /* poppy text that passes on cream */
  --text-on-accent:#FFFFFF;

  --border-subtle:var(--p-rule);
  --border-default:var(--p-rule-2);
  --border-strong:var(--p-ink);
  --border-accent:var(--p-poppy);

  --accent:var(--p-poppy);
  --accent-hover:var(--p-poppy-600);
  --accent-subtle:var(--p-poppy-tint);
  --accent-text:var(--p-poppy-700);

  --focus-ring:var(--p-poppy);
  --focus-ring-shadow:0 0 0 var(--p-focus-w) color-mix(in srgb,var(--p-poppy) 22%,transparent);

  --status-ok:var(--p-ok); --status-ok-bg:var(--p-ok-bg);
  --status-warn:var(--p-warn); --status-warn-bg:var(--p-warn-bg);
  --status-bad:var(--p-bad); --status-bad-bg:var(--p-bad-bg);
  --status-info:var(--p-info); --status-info-bg:var(--p-info-bg);

  --shadow-1:var(--p-sh-1); --shadow-2:var(--p-sh-2); --shadow-3:var(--p-sh-3);

  --viz-1:var(--p-d1); --viz-2:var(--p-d2); --viz-3:var(--p-d3); --viz-4:var(--p-d4); --viz-5:var(--p-d5);
  --viz-grid:var(--p-d-grid); --viz-baseline:var(--p-ink); --viz-label:var(--p-ink-400);
}

/* ============================================================
   SEMANTIC — dark (tuned, not inverted)
   ============================================================ */
[data-theme="dark"] {
  --surface-page:var(--p-ink);
  --surface-raised:var(--p-ink-700);
  --surface-sunken:var(--p-ink-900);
  --surface-inverse:var(--p-cream);
  --surface-pine:var(--p-pine);
  --surface-accent:var(--p-poppy);
  --surface-accent-subtle:color-mix(in srgb,var(--p-poppy) 18%,var(--p-ink));

  --text-primary:var(--p-cream);
  --text-secondary:color-mix(in srgb,var(--p-cream) 72%,transparent);
  --text-muted:color-mix(in srgb,var(--p-cream) 50%,transparent);
  --text-faint:color-mix(in srgb,var(--p-cream) 32%,transparent);
  --text-inverse:var(--p-ink);
  --text-accent:var(--p-poppy-300);
  --text-on-accent:#FFFFFF;

  --border-subtle:color-mix(in srgb,var(--p-cream) 12%,transparent);
  --border-default:color-mix(in srgb,var(--p-cream) 20%,transparent);
  --border-strong:var(--p-cream);
  --border-accent:var(--p-poppy);

  --accent:var(--p-poppy);
  --accent-hover:var(--p-poppy-300);
  --accent-subtle:color-mix(in srgb,var(--p-poppy) 18%,var(--p-ink));
  --accent-text:var(--p-poppy-300);

  --focus-ring:var(--p-poppy);
  --focus-ring-shadow:0 0 0 var(--p-focus-w) color-mix(in srgb,var(--p-poppy) 38%,transparent);

  --status-ok:#5FC98C; --status-ok-bg:color-mix(in srgb,var(--p-ok) 22%,var(--p-ink));
  --status-warn:#E0A93E; --status-warn-bg:color-mix(in srgb,var(--p-warn) 22%,var(--p-ink));
  --status-bad:#E2685B; --status-bad-bg:color-mix(in srgb,var(--p-bad) 22%,var(--p-ink));
  --status-info:#6FB6A2; --status-info-bg:color-mix(in srgb,var(--p-info) 30%,var(--p-ink));

  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 6px 18px -8px rgba(0,0,0,.55);
  --shadow-3:0 22px 50px -18px rgba(0,0,0,.7);

  --viz-1:var(--p-d1); --viz-2:var(--p-cream); --viz-3:#6FB6A2; --viz-4:var(--p-d4);
  --viz-5:color-mix(in srgb,var(--p-warm-grey) 70%,var(--p-ink));
  --viz-grid:color-mix(in srgb,var(--p-cream) 14%,transparent);
  --viz-baseline:color-mix(in srgb,var(--p-cream) 55%,transparent);
  --viz-label:color-mix(in srgb,var(--p-cream) 55%,transparent);
}

/* ============================================================
   TREATMENT TOKENS
   ============================================================ */
:root {
  --treat-mark-fill:var(--accent);
  --treat-corner-size:14px;
  --treat-rule-w:var(--p-bw-marker);
  --treat-grain-opacity:0.04;
  --treat-pattern-opacity:0.22;
  --treat-grid-size:24px;
  --treat-dot-size:13px;
  /* the one approved Wild Burst geometry, as a CSS mask */
  --treat-mark-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%23000' points='50,1,58.8,24.5,74,19.3,70.2,35.3,94.2,33.9,78,48.5,84.9,58.7,71,61.6,82.4,81.3,63.1,73.6,58.5,90.1,47,74.8,29,93.1,30.9,70.5,18,68.5,24.2,53.2,5.8,37.3,29.3,36,24.1,16.9,41.2,24.5'/%3E%3C/svg%3E");
}

/* ---- Global reduced-motion floor (Motion §11) ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}