/* ============================================================
   Ctrl333 — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Import this file as the single source of truth.
   ============================================================ */

/* --- Fonts -----------------------------------------------------
   Omnium Wide + Omnium (regular width) are the brand faces,
   bundled locally as OTF. JetBrains Mono via Google Fonts for
   the terminal / chat-with-AI mono register.
--------------------------------------------------------------- */

@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500;600&display=swap");

/* Omnium Wide — display + body */
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium Wide";
  src: url("/fonts/fonnts.com-Omnium_Wide_ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

/* Omnium (regular width) — for longer copy when Wide is too spacey */
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_Thin.otf") format("opentype");
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Omnium";
  src: url("/fonts/fonnts.com-Omnium_ExtraBold.otf") format("opentype");
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* === TYPE FAMILIES ==========================================
     --font-display: Omnium Wide (the brand face — headlines, signature moments).
     --font-body:    Omnium (regular width) — brand copy, when Wide feels too spacey.
     --font-ui:      Inter — secondary UI font for buttons, form labels, dense
                     interface text where Omnium Wide's Light weight is too airy
                     to read at small sizes. Pair with weight 500/600.
     --font-text:    IBM Plex Mono — secondary body text. A technical, monospaced
                     register for paragraphs, manifesto copy and chat replies. Sits
                     between Omnium (warm, brand) and JetBrains Mono (terminal).
     --font-mono:    JetBrains Mono. */
  --font-display: "Omnium Wide", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Omnium", "Omnium Wide", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:    "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --font-ui:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;

  /* Weights — Omnium Wide Medium (500) is the hero weight. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500; /* brand default */
  --fw-bold:     700;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.12em; /* eyebrows / labels */
  --tracking-widest:  0.24em; /* mono eyebrows */

  /* Line heights */
  --lh-tight:  1.04;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* Type scale — modular, 1.2-ish ratio, large enough for display */
  --fs-12: 12px;  /* micro / mono eyebrow */
  --fs-13: 13px;  /* labels */
  --fs-14: 14px;  /* ui */
  --fs-16: 16px;  /* body */
  --fs-18: 18px;  /* body large */
  --fs-20: 20px;
  --fs-24: 24px;  /* h4 */
  --fs-32: 32px;  /* h3 */
  --fs-44: 44px;  /* h2 */
  --fs-60: 60px;  /* h1 */
  --fs-88: 88px;  /* display */
  --fs-128: 128px; /* hero */

  /* === COLORS ==================================================
     The brand is monochrome first: stark black-on-white (light)
     and stark white-on-black (dark). #f59e0b (amber) is the
     accent for interactive text emphasis. The PRISM palette —
     a Dark-Side-of-the-Moon spectrum — is used sparingly for
     data, highlights, and the signature "prism" visual. */

  /* Ink (true neutrals — monochrome core) */
  --ink-000: #ffffff;
  --ink-050: #f7f7f7;
  --ink-100: #ededed;
  --ink-200: #dcdcdc;
  --ink-300: #b8b8b8;
  --ink-400: #8a8a8a;
  --ink-500: #5c5c5c;
  --ink-600: #3a3a3a;
  --ink-700: #242424;
  --ink-800: #141414;
  --ink-900: #0a0a0a;
  --ink-950: #000000;

  /* Accent — amber for emphasized text & interactive focus */
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b; /* brand accent */
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* Prism spectrum — used in gradients, data viz, and the
     signature pyramid-refraction graphic. Order is the visible
     spectrum: red → orange → yellow → green → cyan → blue → violet. */
  --prism-red:    #ef4444;
  --prism-orange: #f97316;
  --prism-yellow: #f59e0b; /* shared w/ --amber-500 intentionally */
  --prism-green:  #10b981;
  --prism-cyan:   #06b6d4;
  --prism-blue:   #3b82f6;
  --prism-violet: #8b5cf6;

  /* The canonical prism gradient — light beam refracted */
  --gradient-prism: linear-gradient(
    90deg,
    #ef4444 0%,
    #f97316 16%,
    #f59e0b 32%,
    #10b981 50%,
    #06b6d4 66%,
    #3b82f6 82%,
    #8b5cf6 100%
  );

  /* A subtler, night-sky gradient for backgrounds */
  --gradient-void: radial-gradient(
    ellipse at top,
    #141414 0%,
    #0a0a0a 45%,
    #000000 100%
  );

  /* === SEMANTIC COLORS — LIGHT MODE (default) ================ */
  --bg:          var(--ink-000);   /* page */
  --bg-elev-1:  var(--ink-050);    /* card */
  --bg-elev-2:  var(--ink-100);    /* inset / code */
  --surface:    var(--ink-000);
  --surface-muted: var(--ink-050);

  --fg1:         var(--ink-950);   /* primary text */
  --fg2:         var(--ink-600);   /* secondary */
  --fg3:         var(--ink-400);   /* tertiary / captions */
  --fg-muted:    var(--ink-300);
  --fg-on-dark:  var(--ink-000);

  --border:      var(--ink-200);
  --border-strong: var(--ink-300);
  --border-inverse: var(--ink-900);

  --accent:      var(--amber-500);
  --accent-fg:   var(--ink-950);
  --accent-hover: var(--amber-600);

  --focus-ring:  var(--amber-500);
  --selection:   rgba(245, 158, 11, 0.25);

  /* Status */
  --success:   #10b981;
  --warning:   #f59e0b;
  --danger:    #ef4444;
  --info:      #3b82f6;
}

/* === DARK MODE ===============================================
   Dark is the hero environment — the "chat with AI" feel. It
   should feel like deep space: near-black, not blue-black. */
[data-theme="dark"], .theme-dark {
  --bg:          var(--ink-950);
  --bg-elev-1:  var(--ink-900);
  --bg-elev-2:  var(--ink-800);
  --surface:    var(--ink-900);
  --surface-muted: var(--ink-800);

  --fg1:         var(--ink-000);
  --fg2:         var(--ink-300);
  --fg3:         var(--ink-400);
  --fg-muted:    var(--ink-500);
  --fg-on-dark:  var(--ink-000);

  --border:      #1f1f1f;
  --border-strong: #2e2e2e;
  --border-inverse: var(--ink-000);

  --accent:      var(--amber-500);
  --accent-fg:   var(--ink-950);
  --accent-hover: var(--amber-400);

  --focus-ring:  var(--amber-400);
  --selection:   rgba(245, 158, 11, 0.35);
}

/* === SPACING, RADII, SHADOWS, MOTION ======================== */
:root {
  /* Spacing — 4px base, geometric */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* Radii — minimalist, slightly softened */
  --radius-0:  0;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-3:  8px;
  --radius-4:  12px;
  --radius-5:  16px;
  --radius-full: 999px;

  /* Elevation — quiet, never fluffy. Inner lines over big drop
     shadows. We lean on 1px borders + subtle tints. */
  --shadow-sm:  0 1px 0 rgba(0,0,0,0.04);
  --shadow-1:   0 1px 2px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-2:   0 4px 14px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
  --shadow-3:   0 12px 40px rgba(0,0,0,0.12);
  --shadow-glow: 0 0 0 1px rgba(245,158,11,0.35), 0 0 24px rgba(245,158,11,0.25);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,0.04);

  /* Motion — snappy, never bouncy. Brand is precise, alien-calm. */
  --ease-out:    cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* Layout */
  --container:     1200px;
  --container-narrow: 760px;
  --hairline: 1px;
}

/* ============================================================
   Base semantic styles — use as class-free defaults when
   dropped on a document. Components should compose these.
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--fg1); }

/* Display — hero numbers / signature moments */
.t-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(64px, 8vw, 128px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

h1, .t-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(44px, 5vw, 60px);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .t-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: clamp(32px, 3.2vw, 44px);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .t-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}
h4, .t-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: 24px;
  line-height: var(--lh-snug);
}

p, .t-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--fg2);
  text-wrap: pretty;
}

.t-body-lg {
  font-size: var(--fs-18);
  line-height: var(--lh-loose);
  color: var(--fg2);
}

.t-caption {
  font-size: var(--fs-13);
  color: var(--fg3);
  line-height: var(--lh-normal);
}

/* Eyebrow — mono, wide-tracked, used above section titles */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg3);
}

code, .t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elev-2);
  padding: 2px 6px;
  border-radius: var(--radius-2);
  color: var(--fg1);
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
a:hover { color: var(--accent); border-color: var(--accent); }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--space-7) 0;
}

/* Utility — prism text accent */
.t-prism {
  background: var(--gradient-prism);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Accent text — amber — for in-copy emphasis */
.t-accent { color: var(--accent); }