/* ==========================================================================
   rep. design tokens — "Full Stop" design language (v0, exploration)
   Brand roots: navy #070c1e + signal green #3bc24c (the period in "rep.").
   ========================================================================== */

@font-face { font-family: "Creato Display"; font-weight: 100; font-display: swap; src: url("/fonts/CreatoDisplay-Thin.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 300; font-display: swap; src: url("/fonts/CreatoDisplay-Light.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 400; font-display: swap; src: url("/fonts/CreatoDisplay-Regular.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 500; font-display: swap; src: url("/fonts/CreatoDisplay-Medium.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 700; font-display: swap; src: url("/fonts/CreatoDisplay-Bold.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 800; font-display: swap; src: url("/fonts/CreatoDisplay-ExtraBold.woff2") format("woff2"); }
@font-face { font-family: "Creato Display"; font-weight: 900; font-display: swap; src: url("/fonts/CreatoDisplay-Black.woff2") format("woff2"); }

:root {
  /* ---- Midnight (navy) — brand #070c1e is 900 ---- */
  --midnight-1000: #02040b;
  --midnight-950: #04070f;
  --midnight-900: #070c1e;
  --midnight-850: #0a1127;
  --midnight-800: #0e1631;
  --midnight-700: #152045;
  --midnight-600: #1f2d5c;
  --midnight-500: #2f3f78;
  --midnight-400: #5565a1;
  --midnight-300: #8792c2;
  --midnight-200: #bcc3e0;
  --midnight-100: #e3e6f3;

  /* ---- Signal (green) — brand #3bc24c is 500 ---- */
  --signal-900: #0a3511;
  --signal-800: #11541c;
  --signal-700: #1a7a29;
  --signal-600: #27a138;
  --signal-500: #3bc24c;
  --signal-400: #5fd56e;
  --signal-300: #8ee599;
  --signal-200: #c0f2c6;
  --signal-100: #e6fae8;

  /* ---- Neutrals: ink + paper (warm, so the green reads as the only "color") ---- */
  --ink: #0a0b0d;
  --ink-2: #16181c;
  --graphite: #2a2d33;
  --ash: #6b6f78;
  --fog: #a3a6ad;
  --mist: #d9d9d6;
  --bone: #ebe9e3;
  --paper: #f5f3ee;
  --white: #ffffff;

  /* ---- The mark (sampled from the master artwork) ---- */
  --mark-navy: #080c1d;
  --period: #3bc24c;       /* the period, everywhere: logo, UI, patterns (= signal-500). One green. */
  --period-deep: #3bc24c;  /* alias kept for older components */
  --lean: -11.3deg;        /* the mark's forward lean, measured from the p stem */
  --pu: 0.18em;            /* "period unit": the dot's size relative to the type it ends */

  /* ---- Supporting (use sparingly) ---- */
  --echo: #33cfca;   /* legacy teal → data viz / secondary series only */
  --flare: #ff5b3a;  /* errors, "on air" warnings */
  --amber: #f2b84b;  /* pending */

  /* ---- Type ---- */
  --font-display: "Creato Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Creato Display", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  --fs-micro: 0.6875rem;                         /* 11 — mono labels */
  --fs-xs: 0.8125rem;                            /* 13 */
  --fs-sm: 0.9375rem;                            /* 15 */
  --fs-base: 1.0625rem;                          /* 17 */
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.6vw, 3.75rem);
  --fs-3xl: clamp(3rem, 2rem + 4.8vw, 6.5rem);
  --fs-mega: clamp(4.5rem, 2rem + 11vw, 13rem);  /* hero / statement */

  --lh-tight: 0.92;
  --lh-snug: 1.1;
  --lh-body: 1.55;
  --tracking-tight: -0.045em;
  --tracking-snug: -0.02em;
  --tracking-wide: 0.14em;

  /* ---- Space (4px base) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 144px;

  /* ---- Shape ---- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;
  --dot: 0.22em; /* the period, relative to type it punctuates */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);       /* expo out — default for reveals */
  --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1);   /* quint — transitions, wipes */
  --ease-snap: cubic-bezier(0.7, 0, 0.2, 1);       /* decisive, for UI state */
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot — the dot landing */
  --ease-spring: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  --t-fast: 160ms; --t-base: 320ms; --t-slow: 640ms; --t-epic: 1200ms;

  /* ---- Elevation / glow ---- */
  --glow-signal: 0 0 0 1px rgb(59 194 76 / 0.35), 0 0 24px rgb(59 194 76 / 0.35), 0 0 80px rgb(59 194 76 / 0.18);
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.2), 0 4px 12px rgb(0 0 0 / 0.18);
  --shadow-2: 0 2px 4px rgb(0 0 0 / 0.2), 0 16px 48px rgb(0 0 0 / 0.35);
}

/* ---- Themes: semantic roles. Components only use these. ---- */
:root,
[data-theme="midnight"] {
  --bg: var(--midnight-900);
  --bg-raised: var(--midnight-850);
  --bg-sunken: var(--midnight-950);
  --surface: rgb(255 255 255 / 0.04);
  --surface-2: rgb(255 255 255 / 0.08);
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.28);
  --fg: #f4f5f8;
  --fg-muted: var(--midnight-300);
  --fg-subtle: var(--midnight-400);
  --accent: var(--signal-500);
  --accent-fg: var(--midnight-900);
  --accent-soft: rgb(59 194 76 / 0.14);
  --invert-bg: var(--paper);
  --invert-fg: var(--midnight-900);
  color-scheme: dark;
}

[data-theme="paper"] {
  --bg: var(--paper);
  --bg-raised: var(--white);
  --bg-sunken: var(--bone);
  --surface: rgb(7 12 30 / 0.04);
  --surface-2: rgb(7 12 30 / 0.08);
  --line: rgb(7 12 30 / 0.12);
  --line-strong: rgb(7 12 30 / 0.3);
  --fg: var(--midnight-900);
  --fg-muted: #4a5068;
  --fg-subtle: #7a7f90;
  --accent: var(--signal-600);
  --accent-fg: var(--white);
  --accent-soft: rgb(39 161 56 / 0.12);
  --invert-bg: var(--midnight-900);
  --invert-fg: var(--paper);
  color-scheme: light;
}

[data-theme="signal"] {
  --bg: var(--signal-500);
  --bg-raised: var(--signal-400);
  --bg-sunken: var(--signal-600);
  --surface: rgb(7 12 30 / 0.07);
  --surface-2: rgb(7 12 30 / 0.12);
  --line: rgb(7 12 30 / 0.18);
  --line-strong: rgb(7 12 30 / 0.45);
  --fg: var(--midnight-900);
  --fg-muted: rgb(7 12 30 / 0.7);
  --fg-subtle: rgb(7 12 30 / 0.5);
  --accent: var(--midnight-900);
  --accent-fg: var(--signal-500);
  --accent-soft: rgb(7 12 30 / 0.1);
  --invert-bg: var(--midnight-900);
  --invert-fg: var(--signal-500);
  color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-epic: 1ms; }
}