/* ============================================================================
   DAYSTROM DESIGN SYSTEM — Foundations
   colors_and_type.css

   Tone: sovereign, technical, infrastructural. Monochrome base with a single
   oxblood signal accent. British-English UI copy. Crisp 1px hairlines, no
   rounded blobs, no gradients except a single hyperfabric "signal" gradient
   used sparingly for hero treatments.
   ============================================================================ */

/* --------------------------------------------------------------------------
   FONTS
   - Display / UI: "Söhne" preferred, fall back to Inter Tight (Google Fonts)
   - Mono / labels / code: "IBM Plex Mono" (Google Fonts)
   We do not ship Söhne (commercial). Inter Tight is the public substitute.
   -------------------------------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     COLOUR — base (raw tokens, do not bind to UI directly)
     ============================================================ */

  /* Ink — near-black, slightly blue-shifted to feel like CRT phosphor off */
  --ink-1000: #050608;   /* page bg in dark */
  --ink-950:  #0b0d11;   /* card bg in dark */
  --ink-900:  #14171c;
  --ink-800:  #1d2127;
  --ink-700:  #2a2f37;
  --ink-600:  #3a4049;
  --ink-500:  #565d68;
  --ink-400:  #7a818c;
  --ink-300:  #a4abb4;
  --ink-200:  #c8ccd2;
  --ink-150:  #dde0e4;
  --ink-100:  #ebedef;
  --ink-50:   #f4f5f6;
  --ink-25:   #fafafb;
  --paper:    #ffffff;

  /* Signal — sovereign teal. The single accent of the system.
     Reads as cool authority: professional, technical, distinct from
     typical AI blues. Used for actions, focus, "live" indicators, key data. */
  --signal-900: #04181c;
  --signal-700: #0a3138;
  --signal-500: #0f5560;   /* primary action */
  --signal-400: #1e8090;
  --signal-300: #5fb0bd;
  --signal-200: #b5dde3;

  /* Status — used sparingly, never decorative */
  --ok-500:    #2f9e6e;
  --ok-300:    #6ec9a0;
  --warn-500:  #c9931a;
  --error-500: #c63d3d;
  --error-300: #e88585;

  /* Hyperfabric signal — the ONE permitted gradient. Reserved for hero
     surfaces, traffic visualisations, encrypted-inference badges. */
  --signal-gradient: linear-gradient(
    100deg,
    var(--ink-1000) 0%,
    var(--ink-900) 40%,
    var(--signal-700) 78%,
    var(--signal-400) 100%
  );

  /* ============================================================
     COLOUR — semantic tokens (LIGHT / paper mode)
     Bind UI to these, not to raw tokens.
     ============================================================ */
  --bg-page:     var(--paper);
  --bg-surface:  var(--paper);
  --bg-sunken:   var(--ink-25);
  --bg-raised:   var(--paper);
  --bg-inverse:  var(--ink-1000);

  --fg-1:        var(--ink-1000);     /* primary text */
  --fg-2:        var(--ink-700);      /* secondary / body */
  --fg-3:        var(--ink-500);      /* tertiary / meta */
  --fg-4:        var(--ink-400);      /* disabled / ghost */
  --fg-on-inverse: var(--paper);
  --fg-accent:   var(--signal-500);

  --line-1:      var(--ink-150);      /* hairline default */
  --line-2:      var(--ink-200);      /* stronger separator */
  --line-strong: var(--ink-1000);     /* full-strength rule */
  --line-accent: var(--signal-500);

  --focus-ring:  var(--signal-500);
  --selection-bg: var(--signal-200);
  --selection-fg: var(--ink-1000);

  /* ============================================================
     TYPOGRAPHY — families
     ============================================================ */
  --font-sans:    "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "JetBrains Mono", ui-monospace,
                  "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display: var(--font-sans);  /* same family, tightened tracking */

  /* TYPOGRAPHY — scale (1.200 minor third, snapped to whole px) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;   /* base */
  --fs-18: 18px;
  --fs-21: 21px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-36: 36px;
  --fs-48: 48px;
  --fs-60: 60px;
  --fs-72: 72px;

  /* line-heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-prose:   1.6;

  /* tracking */
  --tr-display: -0.02em;   /* large display text — pull tight */
  --tr-tight:   -0.01em;
  --tr-normal:   0em;
  --tr-mono:     0em;
  --tr-label:    0.08em;   /* mono uppercase eyebrows */
  --tr-eyebrow:  0.14em;

  /* weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ============================================================
     SPACING (4px base, named by px so designers and devs share language)
     ============================================================ */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32:  128px;

  /* ============================================================
     RADII — Daystrom is sharp. Default is 0. Capsules only for pills.
     ============================================================ */
  --radius-0:   0px;
  --radius-1:   2px;
  --radius-2:   4px;
  --radius-3:   6px;     /* maximum for cards */
  --radius-pill: 999px;

  /* ============================================================
     ELEVATION — flat-first. Borders carry hierarchy, not shadows.
     ============================================================ */
  --shadow-0: none;
  --shadow-1: 0 1px 0 0 rgba(5, 6, 8, 0.04),
              0 1px 2px 0 rgba(5, 6, 8, 0.04);
  --shadow-2: 0 1px 0 0 rgba(5, 6, 8, 0.04),
              0 4px 12px -2px rgba(5, 6, 8, 0.06);
  --shadow-3: 0 1px 0 0 rgba(5, 6, 8, 0.06),
              0 12px 32px -6px rgba(5, 6, 8, 0.10);
  --shadow-focus: 0 0 0 3px rgba(217, 119, 6, 0.28);
  --inset-hairline: inset 0 0 0 1px var(--line-1);

  /* ============================================================
     MOTION — measured, no bounces. 120-240ms range.
     ============================================================ */
  /* Staged — symmetric ease-in-out. Reads as orchestrated, formal.
     Use --ease-exit for closures (modal dismiss, popover close). */
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 80ms;
  --dur-fast:    160ms;
  --dur-base:    240ms;
  --dur-slow:    360ms;

  /* ============================================================
     LAYOUT
     ============================================================ */
  --container-max: 1200px;
  --container-prose: 720px;
  --grid-gutter: var(--sp-6);
}

/* ============================================================================
   DARK MODE — page negative. The "operator" surface.
   ============================================================================ */
[data-theme="dark"], .theme-dark {
  --bg-page:     var(--ink-1000);
  --bg-surface:  var(--ink-950);
  --bg-sunken:   var(--ink-1000);
  --bg-raised:   var(--ink-900);
  --bg-inverse:  var(--paper);

  --fg-1:        var(--ink-50);
  --fg-2:        var(--ink-200);
  --fg-3:        var(--ink-400);
  --fg-4:        var(--ink-500);
  --fg-on-inverse: var(--ink-1000);
  --fg-accent:   var(--signal-400);

  --line-1:      var(--ink-800);
  --line-2:      var(--ink-700);
  --line-strong: var(--ink-50);
  --line-accent: var(--signal-400);

  --focus-ring:  var(--signal-400);
  --selection-bg: var(--signal-700);
  --selection-fg: var(--paper);

  --shadow-1: 0 1px 0 0 rgba(0, 0, 0, 0.5),
              0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-2: 0 1px 0 0 rgba(0, 0, 0, 0.5),
              0 8px 24px -4px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 1px 0 0 rgba(0, 0, 0, 0.6),
              0 16px 48px -8px rgba(0, 0, 0, 0.6);
  --inset-hairline: inset 0 0 0 1px var(--line-1);
}

/* ============================================================================
   SEMANTIC TYPE STYLES
   Use these classes (or the matching CSS vars) for body copy.
   ============================================================================ */

html { font-size: 16px; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  font-feature-settings: "ss01", "cv11", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection-bg); color: var(--selection-fg); }

/* Display — hero / cover treatments */
.t-display-1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 7vw, var(--fs-72));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}
.t-display-2 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, var(--fs-60));
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
}

/* Headings */
.t-h1 { font-size: var(--fs-36); font-weight: var(--fw-semibold); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); }
.t-h2 { font-size: var(--fs-30); font-weight: var(--fw-semibold); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); }
.t-h3 { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-snug);  letter-spacing: var(--tr-tight); }
.t-h4 { font-size: var(--fs-18); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.t-h5 { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-normal); }

/* Body */
.t-lead    { font-size: var(--fs-21); font-weight: var(--fw-regular); line-height: var(--lh-prose); color: var(--fg-2); }
.t-body    { font-size: var(--fs-16); font-weight: var(--fw-regular); line-height: var(--lh-prose); color: var(--fg-2); }
.t-body-sm { font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: var(--lh-prose); color: var(--fg-2); }
.t-caption { font-size: var(--fs-13); font-weight: var(--fw-regular); line-height: var(--lh-normal); color: var(--fg-3); }

/* Mono / utility — eyebrows, code, system labels */
.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-3);
}
.t-label-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-label);
  color: var(--fg-2);
}
.t-code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: var(--fw-regular);
  background: var(--bg-sunken);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  padding: 0.08em 0.36em;
  color: var(--fg-1);
}
.t-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 20px;
  height: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  background: var(--bg-sunken);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-1);
  padding: 0 4px;
  color: var(--fg-1);
}

/* Element-level baselines — use scoped class .ds-prose to opt in */
.ds-prose h1 { @apply t-h1; }
.ds-prose h1, .ds-prose h2, .ds-prose h3, .ds-prose h4 { color: var(--fg-1); }
.ds-prose h1 { font-size: var(--fs-36); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: 0 0 var(--sp-4); }
.ds-prose h2 { font-size: var(--fs-24); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); margin: var(--sp-10) 0 var(--sp-3); }
.ds-prose h3 { font-size: var(--fs-18); font-weight: var(--fw-semibold); margin: var(--sp-8) 0 var(--sp-2); }
.ds-prose p  { font-size: var(--fs-16); line-height: var(--lh-prose); color: var(--fg-2); margin: 0 0 var(--sp-4); }
.ds-prose a  { color: var(--fg-1); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ds-prose a:hover { color: var(--fg-accent); }
.ds-prose code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-sunken); border: 1px solid var(--line-1); padding: 0.08em 0.36em; border-radius: var(--radius-1); }
.ds-prose pre  { font-family: var(--font-mono); font-size: var(--fs-13); background: var(--bg-sunken); border: 1px solid var(--line-1); padding: var(--sp-4); border-radius: var(--radius-2); overflow-x: auto; }
.ds-prose hr   { border: 0; border-top: 1px solid var(--line-1); margin: var(--sp-8) 0; }
.ds-prose ul, .ds-prose ol { color: var(--fg-2); padding-left: 1.25em; }
.ds-prose li { margin: 0.25em 0; }

/* ============================================================================
   FOCUS — visible, signal-oxblood, square (we do NOT round focus)
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 0;
}