/* OSINT.place design system v2 — tokens.
 *
 * A verbatim copy of design/tokens/*.css (colors, typography, spacing, motion, base),
 * concatenated in that order. Copied on 2026-09-04 per the design system's own recipe:
 * an app carries the tokens, and nothing else in the app declares a literal.
 *
 * Do not edit values here. If a token is missing, it is missing upstream — ask, do not
 * invent one or approximate with a neighbour.
 *
 * fonts.css is deliberately not included: it @imports Google Fonts, and index.html
 * links them directly so the browser can preconnect.
 */

/* OSINT.place colour tokens. Dark is :root (web, decks, brand); light is [data-theme="light"] (SaaS, documents). */
:root {
  /* base */
  --bg: #080B10;
  --surface: #0E1219;
  --surface-2: #141A24;
  --line: rgba(255,255,255,.10);
  --line-soft: rgba(255,255,255,.06);
  --line-2: rgba(255,255,255,.20);
  --text: #EEF1F5;
  --text-2: #A3ACB9;
  --text-3: #7B8494;

  /* accent — one accent, two jobs */
  --brand: #12A05A;            /* logo centre dot, brand value */
  --accent: #2ED47A;           /* graphic: dots, bars, hairlines */
  --accent-fill: #2ED47A;      /* text-bearing fill */
  --on-accent: #080B10;
  --accent-text: #2ED47A;
  --accent-soft: rgba(46,212,122,.14);
  --accent-line: rgba(46,212,122,.40);

  /* state */
  --warn: #F2B824;  --warn-text: #F2B824;  --warn-soft: rgba(242,184,36,.14);  --on-warn: #080B10;
  --error: #E5484D; --error-text: #FF6B70; --error-soft: rgba(229,72,77,.14);  --on-error: #080B10; /* 5.04:1 on --error; #FFFFFF measured 3.91 */
  --info: #5B9BFF;  --info-soft: rgba(91,155,255,.14);
  --focus: #2ED47A;

  /* chrome */
  --dot: rgba(255,255,255,.08);
  --scrim: rgba(0,0,0,.6);
  --strip-bg: #000000;   --strip-text: #A3ACB9;
  --console-bg: #05070A; --console-text: #EEF1F5; --console-muted: #7B8494; --console-line: rgba(255,255,255,.1);
  --hl: #7A5B00;

  /* semantic aliases */
  --surface-page: var(--bg);
  --surface-card: var(--surface);
  --surface-inset: var(--surface-2);
  --text-body: var(--text);
  --text-muted: var(--text-2);
  --text-label: var(--text-3);
  --border-default: var(--line);
  --border-control: var(--line-2);
}
[data-theme="light"] {
  --bg: #F5F7FA;
  --surface: #FFFFFF;
  --surface-2: #EDF0F4;
  --line: #DCE1E8;
  --line-soft: #EDF0F4;
  --line-2: #C9D0DA;
  --text: #0B0F16;
  --text-2: #5B6473;
  /* Measured, not eyeballed. #6B7484 was 4.39:1 on --bg and 4.12:1 on
     --surface-2 — failing AA as text on two of the three light surfaces, which
     the "mono labels only" rule does not rescue: an 11px label is still normal
     text. #646D7D is the minimal darkening on the same hue that clears 4.5
     everywhere — 4.86 on --bg, 5.22 on --surface, 4.56 on --surface-2. Dark's
     --text-3 already passes and is unchanged. */
  --text-3: #646D7D;

  --accent: #12A05A;           /* graphic only — never text on light */
  --accent-fill: #0C7742;
  --on-accent: #FFFFFF;
  --accent-text: #0C7742;
  --accent-soft: #E3F5EA;
  --accent-line: #9ED9B8;

  --warn: #F2B824;  --warn-text: #8A6300;  --warn-soft: #FBF1D6;
  --error: #D1343A; --error-text: #B4232A; --error-soft: #FBE7E8; --on-error: #FFFFFF; /* 4.93:1; a dark label here is 4.0 */
  --info: #2F6FE4;  --info-soft: #E6EEFC;
  --focus: #0C7742;

  --dot: rgba(11,15,22,.1);
  --scrim: rgba(11,15,22,.45);
  --strip-bg: #0B0F16;   --strip-text: #C9CFD8;
  --console-bg: #0B0F16; --console-text: #EEF1F5; --console-muted: #7B8494; --console-line: rgba(255,255,255,.1);
  --hl: #FFE58A;
}

:root {
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Manrope', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, monospace;
  --font-icon: 'Material Symbols Outlined';

  /* size scale */
  --fs-display: clamp(44px, 6vw, 88px);
  --fs-h1: 48px;
  --fs-h2: 34px;
  --fs-h3: 20px;
  --fs-body: 17px;      /* web paragraphs */
  --fs-ui: 13px;        /* product copy */
  --fs-data: 12px;      /* mono cells */
  --fs-label: 11px;     /* mono eyebrows — floor */

  --lh-display: .98;
  --lh-heading: 1.1;
  --lh-body: 1.6;
  --lh-ui: 1.45;

  --track-display: -.03em;
  --track-heading: -.02em;
  --track-label: .14em;   /* uppercase mono eyebrows .12–.18em */

  /* composed */
  --type-display: 600 var(--fs-display)/var(--lh-display) var(--font-display);
  --type-h1: 600 var(--fs-h1)/1.02 var(--font-display);
  --type-h2: 600 var(--fs-h2)/var(--lh-heading) var(--font-display);
  --type-h3: 600 var(--fs-h3)/1.25 var(--font-display);
  --type-body: 400 var(--fs-body)/var(--lh-body) var(--font-body);
  --type-ui: 500 var(--fs-ui)/var(--lh-ui) var(--font-body);
  --type-data: 400 var(--fs-data)/1.6 var(--font-mono);
  --type-label: 400 var(--fs-label)/1.6 var(--font-mono);

  /* icons: Material Symbols Outlined, weight 300, FILL only on active nav */
  --icon-settings: 'wght' 300, 'FILL' 0, 'GRAD' 0, 'opsz' 24;
}

:root {
  --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-24: 96px;
  --space-32: 128px;

  --radius: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;
  --shadow: none;                 /* depth is line + surface step, never shadow */

  --control-h: 40px;              /* buttons, inputs */
  --control-h-touch: 44px;        /* primary actions, touch */
  --control-h-sm: 32px;           /* toolbar buttons */
  --target-min: 24px;
  --rail-w: 232px;
  --topbar-h: 56px;
  --strip-h: 22px;
  --content-max: 1320px;
  --gutter: 32px;
}

:root {
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 160ms;     /* hover, toggle */
  --dur-base: 320ms;     /* panel, drawer */
  --dur-reveal: 720ms;   /* scroll reveal, web only */
  --reveal-y: 24px;
  --stagger: 70ms;
  --marquee: 40s;        /* always has a pause control */
  --pulse: 1.8s;         /* never above 3 flashes/s */
}
@keyframes os-pulse { 0%,100% { opacity:1 } 50% { opacity:.3 } }
@keyframes os-marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes os-reveal { from { opacity:0; transform:translateY(var(--reveal-y)) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font:var(--type-body); }
*, *::before, *::after { box-sizing:border-box; }
a { color:var(--accent-text); text-decoration:none; }
a:hover { color:var(--text); text-decoration:underline; }
button { font:inherit; color:inherit; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:2px; }
::selection { background:var(--accent-fill); color:var(--on-accent); }
.os-icon { font-family:var(--font-icon); font-weight:normal; font-style:normal; line-height:1; letter-spacing:normal; text-transform:none; display:inline-block; white-space:nowrap; direction:ltr; font-variation-settings:var(--icon-settings); -webkit-font-smoothing:antialiased; }
.os-scroll::-webkit-scrollbar { width:10px; height:10px }
.os-scroll::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:5px; border:2px solid var(--bg) }