/* ==========================================================================
   PEPWELL DESIGN SYSTEM — 01 TOKENS
   Concept: "Instrument." Certainty is rendered as ink density.
   Everything below is a decision, not a default.
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     NEUTRALS — cool-shifted. Never pure gray; every step carries a trace
     of blue so it sits under the cobalt signal without muddying.
     --------------------------------------------------------------------- */
  --pw-white:      #FFFFFF;
  --pw-paper:      #FBFCFD;   /* page ground */
  --pw-surface:    #FFFFFF;   /* raised card */
  --pw-sunken:     #F1F4F7;   /* wells, table stripes, code */
  --pw-sunken-2:   #E8ECF1;

  --pw-ink:        #0A0D12;   /* headlines, primary text */
  --pw-ink-2:      #39414D;   /* body */
  --pw-ink-3:      #69737F;   /* secondary, captions */
  --pw-ink-4:      #7C8694;   /* placeholder, disabled — AA at body sizes */

  /* Alpha, not opaque grey. Alpha borders compound correctly where two rules
     cross and stay honest over --pw-sunken; opaque ones leave visible seams. */
  --pw-line:       rgba(10,13,18,.078);  /* hairline default */
  --pw-line-2:     rgba(10,13,18,.155);  /* emphasized hairline */
  --pw-line-3:     rgba(10,13,18,.255);  /* hover + decorative borders */
  /* Retina renders a true half-pixel; 1px is a fat rule on a 2x display. */
  /* .46 measures 3.20:1 against paper — clears WCAG 1.4.11's 3:1 for a UI
     component boundary. .26 looked right but measured 1.82:1, which is a
     decorative hairline wearing a functional label. */
  --pw-line-input: rgba(10,13,18,.46);
  --pw-hairline:   1px;

  /* ---------------------------------------------------------------------
     SIGNAL — one accent, used sparingly. Deep cobalt reads scientific and
     trustworthy; deliberately not SaaS-blue, not teal, not lime.
     --------------------------------------------------------------------- */
  --pw-signal:     #2438DC;
  --pw-signal-h:   #1B2CB8;   /* hover */
  --pw-signal-a:   #16249A;   /* active */
  /* On near-black surfaces the base cobalt only separates from the ground at
     2.48:1 — the control reads as a smudge rather than a crisp shape. These
     lift it to 3.86:1 while keeping white label text at AA (5.04:1). */
  --pw-signal-on-dark:   #4C5EF0;
  --pw-signal-on-dark-h: #6172F4;
  --pw-signal-t1:  #EDEFFE;   /* tint — backgrounds */
  --pw-signal-t2:  #D7DCFC;   /* tint — borders on tint */
  --pw-signal-ink: #1A247A;   /* text on tint */

  /* ---------------------------------------------------------------------
     SUPPORTING SIGNALS
     Sand  = preclinical / animal evidence territory
     Burnt = regulatory action, enforcement, caution
     Moss  = established, approved, verified
     --------------------------------------------------------------------- */
  --pw-sand:       #A87334;
  --pw-sand-t1:    #FBF3E6;
  --pw-sand-t2:    #F0DFC3;
  --pw-sand-ink:   #6E4A1E;

  --pw-burnt:      #C2410C;
  --pw-burnt-t1:   #FDF0EA;
  --pw-burnt-t2:   #F8D8C8;
  --pw-burnt-ink:  #8A2D08;

  --pw-moss:       #2F6B4F;
  --pw-moss-t1:    #EBF4EF;
  --pw-moss-t2:    #CBE2D6;
  --pw-moss-ink:   #1F4A36;

  /* ---------------------------------------------------------------------
     EVIDENCE SCALE — the signature primitive.
     Ink density encodes confidence. A is solid and saturated; E is an
     empty dashed outline because there is nothing solid to stand on.
     This is never a red/green traffic light: D and E are not "bad",
     they are unresolved. The palette must not moralize.
     --------------------------------------------------------------------- */
  /* All five foreground/background pairs clear WCAG AA (4.5:1) at 11px.
     B is darkened from the midtone and E's text darkened off the hairline
     gray — a tier badge is load-bearing information, not decoration. */
  --pw-tier-a-bg:     #2438DC;  --pw-tier-a-fg: #FFFFFF;  --pw-tier-a-bd: #2438DC;
  --pw-tier-b-bg:     #5866DE;  --pw-tier-b-fg: #FFFFFF;  --pw-tier-b-bd: #5866DE;
  --pw-tier-c-bg:     #DDE1FB;  --pw-tier-c-fg: #2A369E;  --pw-tier-c-bd: #C3CAF7;
  --pw-tier-d-bg:     #F5E7D0;  --pw-tier-d-fg: #6E4A1E;  --pw-tier-d-bd: #E6D2B0;
  --pw-tier-e-bg:     transparent; --pw-tier-e-fg: #626C7A; --pw-tier-e-bd: #B3BDC9;

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     Schibsted Grotesk — editorial grotesque, tight and confident.
     Newsreader        — journal italic, for uncertainty + pull statements.
     IBM Plex Mono     — instrument face: data, tiers, dates, citations.
     --------------------------------------------------------------------- */
  --pw-font-sans: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --pw-font-serif: "Newsreader", Georgia, serif;
  --pw-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* Scale — 1.25-ish, hand-corrected at display sizes for optical fit */
  --pw-t-display:  clamp(2.75rem, 1.6rem + 4.6vw, 4.25rem); /* 44 → 68 */
  --pw-t-h1:       clamp(2.125rem, 1.5rem + 2.4vw, 3rem);   /* 34 → 48 */
  --pw-t-h2:       clamp(1.625rem, 1.3rem + 1.2vw, 2rem);   /* 26 → 32 */
  --pw-t-h3:       1.3125rem;  /* 21 */
  --pw-t-h4:       1.0625rem;  /* 17 */
  --pw-t-body:     1.0625rem;  /* 17 — long-form reading size */
  --pw-t-sm:       0.9375rem;  /* 15 — UI default */
  --pw-t-xs:       0.8125rem;  /* 13 — captions, table cells */
  --pw-t-micro:    0.6875rem;  /* 11 — mono eyebrows, tier codes */

  /* Tracking — tighten as size grows, open up for mono micro-labels */
  --pw-track-display: -0.035em;
  --pw-track-head:    -0.022em;
  --pw-track-body:    -0.006em;
  --pw-track-micro:    0.13em;

  --pw-leading-tight: 1.04;
  --pw-leading-head:  1.16;
  /* 28/17 lands lines on a 28px rhythm at the 17px prose size, which is where
     long-form copy is set. Note this is a ratio, so it only yields exactly
     28px at 17px — the 15px UI size resolves elsewhere and that is fine. */
  --pw-leading-body:  calc(28 / 17);

  /* ---------------------------------------------------------------------
     SPACE — 4px base. Named by intent, not by t-shirt size.
     --------------------------------------------------------------------- */
  --pw-s1: 4px;   --pw-s2: 8px;   --pw-s3: 12px;  --pw-s4: 16px;
  --pw-s5: 20px;  --pw-s6: 24px;  --pw-s7: 32px;  --pw-s8: 40px;
  --pw-s9: 56px;  --pw-s10: 72px; --pw-s11: 96px; --pw-s12: 128px;

  /* ---------------------------------------------------------------------
     RADII — deliberately tight. Large radii read soft and generic;
     this product should read like a precision instrument.
     --------------------------------------------------------------------- */
  --pw-r-xs: 4px;
  --pw-r-sm: 6px;
  --pw-r-md: 10px;
  --pw-r-lg: 14px;
  --pw-r-full: 999px;

  /* ---------------------------------------------------------------------
     ELEVATION — cool-tinted, layered, low. Shadows suggest a sheet of
     paper lifted 2mm, never a floating balloon.
     --------------------------------------------------------------------- */
  --pw-e0: none;
  --pw-e1: 0 1px 2px rgba(10,13,18,.05), 0 0 0 1px rgba(10,13,18,.04);
  --pw-e2: 0 2px 4px rgba(10,13,18,.05), 0 4px 12px rgba(10,13,18,.05), 0 0 0 1px rgba(10,13,18,.045);
  --pw-e3: 0 8px 16px -4px rgba(10,13,18,.07), 0 20px 40px -8px rgba(10,13,18,.09), 0 0 0 1px rgba(10,13,18,.05);
  --pw-e-focus: 0 0 0 3px var(--pw-signal-t2);

  /* ---------------------------------------------------------------------
     MOTION — restrained. Nothing bounces. Everything decelerates.
     --------------------------------------------------------------------- */
  /* These MUST stay multiples of 100. The fonts load as pinned static
     instances (wght@400;500;600;700;800), not a variable axis, so the browser
     snaps to the nearest bucket: 510 quantizes UP to 600 and silently turns
     every mono label semibold. Non-round weights only work with wght@400..800. */
  --pw-w-med:  500;
  --pw-w-semi: 600;
  --pw-w-bold: 700;

  --pw-ease:      cubic-bezier(.2,.7,.2,1);
  --pw-ease-out:  cubic-bezier(.16,1,.3,1);
  --pw-dur-1: 120ms;
  --pw-dur-2: 160ms;
  --pw-dur-3: 340ms;
  --pw-dur-4: 620ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --pw-max:      1240px;
  --pw-max-text: 68ch;
  --pw-gutter:   clamp(20px, 4vw, 48px);
  --pw-nav-h:    64px;

  /* Graph rule — the ground texture. Lab notebook, not fintech dot grid. */
  --pw-graph-sm: 8px;
  --pw-graph-lg: 64px;
  --pw-graph-c1: rgba(10,13,18,.028);
  --pw-graph-c2: rgba(10,13,18,.055);
}

/* Respect reduced motion globally at the token layer. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pw-dur-1: 0ms; --pw-dur-2: 0ms; --pw-dur-3: 0ms; --pw-dur-4: 0ms;
  }
}

/* A 1px rule is two device pixels on retina — visibly heavier than the
   hairline it is meant to be. Every border using var(--pw-hairline) thins. */
@media (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) {
  :root { --pw-hairline: 0.5px; }
}