/* GENERATED by scripts/build_ds_css.py — do not edit.
 * Source: _ds/ token export, concatenated in cascade order.
 * Transform: --text-body (size) renamed to --text-size-body; the
 * colors.css definition (navy-700) now survives the cascade.
 * Google Fonts @import stripped — fonts are self-hosted.
 */

/* ===== colors.css ===== */
/* ============================================================
   Outsized Insights — Color tokens
   Derived from the wordmark: deep slate-navy ink + warm amber/gold.
   The brand carries a blue -> amber "spectrum" motif (the build ->
   analyze pipeline; multi-source sampling) used sparingly as accent.
   ============================================================ */

:root {
  /* ---- Navy / slate ink (the "OUTSIZED" half of the mark) ---- */
  --navy-950: #0E1626;   /* deepest — dark-section background */
  --navy-900: #141E33;
  --navy-800: #1B2940;
  --navy-700: #233351;   /* primary ink, headlines on light */
  --navy-600: #2E4163;
  --navy-500: #3D4A66;   /* wordmark "OUTSIZED" body weight */
  --navy-400: #5A6B8C;
  --navy-300: #8593AE;
  --navy-200: #B6BFD1;
  --navy-100: #DBE0EA;
  --navy-050: #EEF1F6;

  /* ---- Amber / gold (the "insights" half of the mark) ---- */
  --amber-700: #A9701F;
  --amber-600: #C9842F;  /* accessible amber for text on light */
  --amber-500: #E2A24C;  /* primary accent */
  --amber-400: #ECB76B;
  --amber-300: #F3CD95;
  --amber-200: #F8E0BD;
  --amber-100: #FCEFDC;
  --amber-050: #FDF7EE;

  /* ---- Warm neutrals (paper) ---- */
  --paper:     #FBFAF7;  /* page background — warm off-white */
  --paper-2:   #F5F2EC;  /* alternating section / card-on-paper */
  --paper-3:   #ECE8DF;  /* subtle wells, table zebra */
  --line:      #E4DFD4;  /* hairline borders on paper */
  --line-soft: #EFEBE2;

  /* ---- Pure-ish ---- */
  --white: #FFFFFF;
  --black: #0A0F18;

  /* ---- Cool slate neutrals (for UI chrome / Spoiler-AI product) ---- */
  --slate-50:  #F6F7F9;
  --slate-100: #ECEEF2;
  --slate-200: #DCE0E7;
  --slate-300: #C2C8D3;
  --slate-400: #98A1B2;
  --slate-500: #6B7488;
  --slate-600: #4B5468;

  /* ---- Semantic data-quality signals (used in diagrams/status) ---- */
  --verify-600: #2F7D5B;  /* "verified / passed" — measured green */
  --verify-500: #3E9E73;
  --verify-100: #E3F1EA;
  --flag-600:   #B4502A;  /* "flagged / fraud caught" — terracotta */
  --flag-500:   #D26B41;
  --flag-100:   #F8E7DE;
  --info-600:   #2A5C8F;  /* "in field / informational" — cool blue */
  --info-500:   #3E78AE;
  --info-100:   #E2ECF5;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scales
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--paper);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--paper-2);
  --surface-inset:    var(--paper-3);
  --surface-ink:      var(--navy-900);   /* dark sections */
  --surface-ink-deep: var(--navy-950);

  /* Text */
  --text-strong:   var(--navy-900);   /* headlines */
  --text-body:     var(--navy-700);   /* paragraph ink */
  --text-muted:    var(--navy-400);   /* secondary / captions */
  --text-faint:    var(--navy-300);   /* meta, timestamps */
  --text-on-ink:        #EAEEF5;       /* body text on dark navy */
  --text-on-ink-strong: #FFFFFF;
  --text-on-ink-muted:  #97A4BE;
  --text-accent:   var(--amber-600);  /* amber text on light (accessible) */

  /* Brand / accent */
  --accent:        var(--amber-500);
  --accent-strong: var(--amber-600);
  --accent-soft:   var(--amber-100);
  --brand-ink:     var(--navy-700);

  /* Borders */
  --border:        var(--line);
  --border-soft:   var(--line-soft);
  --border-strong: var(--navy-200);
  --border-ink:    rgba(255,255,255,0.12);  /* hairlines on dark */
  --focus-ring:    var(--amber-500);

  /* Links */
  --link:       var(--navy-700);
  --link-hover: var(--amber-600);

  /* Signature gradient — the brand "spectrum" (build -> analyze) */
  --spectrum: linear-gradient(90deg, #233351 0%, #3E78AE 42%, #E2A24C 100%); /* @kind color */
  --spectrum-soft: linear-gradient(90deg, #2E4163 0%, #E2A24C 100%); /* @kind color */
}
/* ===== typography.css ===== */
/* ============================================================
   Outsized Insights — Typography
   Display & UI:  Schibsted Grotesk  (confident, slightly geometric
                  grotesque — carries headlines and all running text)
   Technical:     IBM Plex Mono      (data labels, cluster tags,
                  metrics, diagram annotations — the "engine" voice)
   One sans + one mono. Restraint by design; whitespace does the rest.
   ============================================================ */


:root {
  /* ---- Families ---- */
  --font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-display: var(--font-sans);
  --font-body:    var(--font-sans);

  /* ---- Weights ---- */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */
  --fw-black: 900; /* @kind font */

  /* ---- Type scale (fluid where it matters) ----
     Tuned for an editorial, content-rich marketing surface. */
  --text-display-xl: clamp(3rem, 6vw, 5rem);      /* hero */
  --text-display-l:  clamp(2.5rem, 4.6vw, 3.75rem);
  --text-display-m:  clamp(2rem, 3.4vw, 2.75rem);
  --text-h1: 2.5rem;     /* 40 */
  --text-h2: 2rem;       /* 32 */
  --text-h3: 1.5rem;     /* 24 */
  --text-h4: 1.25rem;    /* 20 */
  --text-h5: 1.0625rem;  /* 17 */
  --text-lead: 1.375rem; /* 22 — subheads under heroes */
  --text-body-lg: 1.125rem; /* 18 */
  --text-size-body: 1rem;     /* 16 */
  --text-body-sm: 0.9375rem;/* 15 */
  --text-caption: 0.8125rem;/* 13 */
  --text-mono-label: 0.75rem; /* 12 — uppercase mono tags */
  --text-micro: 0.6875rem;  /* 11 */

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind other */   /* display */
  --lh-snug: 1.18; /* @kind other */   /* headings */
  --lh-normal: 1.4; /* @kind other */
  --lh-relaxed: 1.6; /* @kind other */    /* body copy */
  --lh-loose: 1.7; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.022em; /* @kind other */  /* large display */
  --ls-snug: -0.012em; /* @kind other */  /* headings */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-mono: 0.08em; /* @kind other */    /* uppercase mono labels */
  --ls-caps: 0.12em; /* @kind other */    /* eyebrow caps */
}

/* ---- Optional utility classes (tokens are the contract; these help cards) ---- */
.oi-display { font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight); line-height: var(--lh-tight); color: var(--text-strong); }
.oi-eyebrow { font-family: var(--font-mono); font-size: var(--text-mono-label);
  font-weight: var(--fw-medium); letter-spacing: var(--ls-mono); text-transform: uppercase;
  color: var(--text-accent); }
.oi-lead { font-size: var(--text-lead); line-height: var(--lh-normal); color: var(--text-body);
  font-weight: var(--fw-regular); }
.oi-body { font-family: var(--font-body); font-size: var(--text-size-body);
  line-height: var(--lh-relaxed); color: var(--text-body); }
.oi-mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); }
/* ===== spacing.css ===== */
/* ============================================================
   Outsized Insights — Spacing, sizing, layout
   Base unit 4px. Generous, content-rich whitespace — the brief asks
   for "considered, not manufactured": let sections breathe.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-11: 6rem;     /* 96 */
  --space-12: 8rem;     /* 128 */

  /* ---- Section rhythm ---- */
  --section-y:       clamp(4rem, 8vw, 8rem); /* @kind spacing */
  --section-y-tight: clamp(3rem, 5vw, 5rem); /* @kind spacing */
  --content-gap:     clamp(2rem, 4vw, 4rem); /* @kind spacing */

  /* ---- Layout widths ---- */
  --container:    1200px;  /* standard content column */
  --container-wide: 1320px;
  --container-narrow: 760px; /* long-form reading measure */
  --measure: 68ch;          /* paragraph max line length */
  --gutter: clamp(1.25rem, 4vw, 2.5rem); /* @kind spacing */

  /* ---- Radii — restrained, mostly small & architectural ---- */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---- Control sizing ---- */
  --control-h-sm: 36px;
  --control-h:    44px;   /* default — meets 44px hit target */
  --control-h-lg: 54px;
  --field-px: var(--space-4);

  /* ---- Borders ---- */
  --bw-hair: 1px; /* @kind spacing */
  --bw: 1.5px; /* @kind spacing */
  --bw-bold: 2px; /* @kind spacing */
}
/* ===== effects.css ===== */
/* ============================================================
   Outsized Insights — Effects: elevation, motion, focus
   The brand reads as engineered and precise. Shadows are soft, low,
   and cool-tinted (navy), never heavy drop shadows. Motion is
   measured and purposeful — content-bearing, not decorative.
   ============================================================ */

:root {
  /* ---- Elevation — soft, navy-tinted, layered ---- */
  --shadow-xs:  0 1px 2px rgba(20, 30, 51, 0.06);
  --shadow-sm:  0 1px 2px rgba(20, 30, 51, 0.05),
                0 2px 6px rgba(20, 30, 51, 0.05);
  --shadow-md:  0 2px 4px rgba(20, 30, 51, 0.05),
                0 8px 20px rgba(20, 30, 51, 0.07);
  --shadow-lg:  0 4px 10px rgba(20, 30, 51, 0.06),
                0 18px 40px rgba(20, 30, 51, 0.10);
  --shadow-xl:  0 8px 24px rgba(20, 30, 51, 0.10),
                0 32px 70px rgba(20, 30, 51, 0.14);
  /* Amber-cast glow — used only for primary CTA emphasis, sparingly */
  --shadow-accent: 0 4px 14px rgba(201, 132, 47, 0.28);
  /* Crisp hairline as a "shadow" — borders that read on any surface */
  --ring-hair: inset 0 0 0 1px var(--line);
  --ring-ink:  inset 0 0 0 1px rgba(255,255,255,0.10); /* @kind shadow */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-quick: 180ms; /* @kind other */
  --dur-base: 260ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */
  --dur-slower: 680ms; /* @kind other */

  /* ---- Focus ---- */
  --focus-width: 3px; /* @kind spacing */
  --focus-offset: 2px; /* @kind spacing */
  --focus-shadow: 0 0 0 var(--focus-offset) var(--surface-page),
                  0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--amber-500);

  /* ---- Backdrop blur (glass nav over content) ---- */
  --blur-nav: saturate(140%) blur(14px); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:0ms; /* @kind other */
    --dur-quick:0ms; /* @kind other */
    --dur-base:0ms; /* @kind other */
    --dur-slow:0ms; /* @kind other */
    --dur-slower:0ms; /* @kind other */
  }
}
/* ===== base.css ===== */
/* ============================================================
   Outsized Insights — Base element defaults
   Minimal, token-driven resets so specimens & kits inherit the
   brand voice without per-file boilerplate.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-size-body);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: 1em; }

a { color: var(--link); text-decoration: none; transition: color var(--dur-quick) var(--ease-out); }
a:hover { color: var(--link-hover); }

strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); }

small { font-size: var(--text-caption); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--amber-200); color: var(--navy-900); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border-radius: var(--radius-xs);
}

hr { border: none; border-top: var(--bw-hair) solid var(--border); margin: var(--space-6) 0; }

img, svg, video { display: block; max-width: 100%; }

/* Shared eyebrow + container helpers used across specimen cards/kits */
.oi-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }