/* ============================================================================
   SOFT PRODUCT — theme.css
   Design tokens + primitives.

   The deliberate opposite of the HUD: rounded, roomy, sentence case, layered
   soft shadows and a calm indigo accent. Built for first-time users rather
   than operators — fewer borders, more air, nothing shouting in uppercase.

   Load order:  theme.css  ->  components.css  ->  your app styles.
   ============================================================================ */

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

/* ----------------------------------------------------------------- TOKENS -- */
:root {
  /* --- Ink ramp: warm-neutral slate --- */
  --ink-900: #1e1b39;
  --ink-800: #2f2b52;
  --ink-700: #45416b;
  --ink-600: #5f5b82;
  --ink-500: #7b7799;
  --ink-400: #9997b0;
  --ink-300: #bcbaca;
  --ink-200: #dedce6;

  /* --- Surfaces --- */
  --paper:   #f7f7fb;
  --panel:   #ffffff;
  --panel-2: #f4f4f9;
  --panel-3: #ebebf3;

  /* --- Hairlines: barely there --- */
  --line:        #e8e8f0;
  --line-strong: #d7d7e3;
  --line-onink:  #3a3660;

  /* --- Console surfaces: always dark --- */
  --console-bg:   #1e1b39;
  --console-fg:   #e6e5f0;
  --console-line: #322e55;

  /* --- Accent: calm indigo --- */
  --accent:      #5b5bd6;
  --accent-ink:  #4a49c4;
  --accent-hi:   #7070e6;
  --accent-soft: #eeeefc;

  /* --- Support + signal --- */
  --blue:   #3b6fd4;
  --danger: #d2455a;
  --warn:   #c2790f;
  --ok:     #15966b;
  --danger-soft: #fdeef0;
  --warn-soft:   #fdf4e6;
  --ok-soft:     #e7f6f0;

  /* --- Typography: sentence case everywhere --- */
  --font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --fs-0: 0.75rem;     /* 12 */
  --fs-1: 0.8125rem;   /* 13 */
  /* 15px body, not the 14 a dense tool would use: this is the public-facing
     pack, and its body copy is read by first-time users on phones. */
  --fs-2: 0.9375rem;   /* 15 - body */
  --fs-3: 1rem;        /* 16 */
  --fs-4: 1.125rem;    /* 18 */
  --fs-5: 1.5rem;      /* 24 */
  --fs-6: 2.25rem;     /* 36 */
  --fs-7: 3.25rem;     /* 52 */

  /* Tracking is near zero — this pack never uses uppercase for emphasis. */
  --tracking-cap: 0.01em;
  --tracking-wide: 0.06em;

  /* --- Space scale: roomier than the HUD --- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.875rem; --sp-4: 1.25rem;
  --sp-5: 1.75rem;  --sp-6: 2.5rem;   --sp-7: 3.5rem;   --sp-8: 4.5rem;

  /* --- Geometry: generous rounding --- */
  --radius:    8px;
  --radius-lg: 14px;
  --chamfer:   14px;
  --bracket-len: 0px;
  --bracket-w:   0px;

  /* --- Elevation: soft, layered, colour-tinted --- */
  --shadow-1: 0 1px 2px rgba(30, 27, 57, .05), 0 1px 3px rgba(30, 27, 57, .04);
  --shadow-2: 0 4px 12px rgba(30, 27, 57, .07), 0 2px 4px rgba(30, 27, 57, .04);
  --shadow-pop: 0 24px 60px rgba(30, 27, 57, .22);

  /* --- Motion: a touch slower, it should feel gentle --- */
  --dur: 180ms;
  --ease: cubic-bezier(.32,.72,.28,1);
}

/* ------------------------------------------------------- DARK VARIANT ----- */
[data-theme="dark"] {
  --ink-900: #f3f2fa;
  --ink-800: #e5e4f0;
  --ink-700: #cdcbdf;
  --ink-600: #adaac6;
  --ink-500: #918eae;
  --ink-400: #757293;
  --ink-300: #565374;
  --ink-200: #3d3a58;

  --paper:   #131126;
  --panel:   #1c1936;
  --panel-2: #191631;
  --panel-3: #262244;

  --line:        #2b2750;
  --line-strong: #3a3560;
  --line-onink:  #3a3560;

  --console-bg:   #0f0d20;
  --console-fg:   #e6e5f0;
  --console-line: #2b2750;

  --accent:      #7d7cf0;
  --accent-ink:  #a3a2f8;
  --accent-hi:   #9694ff;
  --accent-soft: #23204a;

  --danger: #ef7085;
  --warn:   #dfa03c;
  --ok:     #35c295;
  --danger-soft: #2e1722;
  --warn-soft:   #2c2113;
  --ok-soft:     #10291f;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .4);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, .6);
}

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

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-2);
  line-height: 1.6;
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
p  { margin: 0 0 var(--sp-3); }
a  { color: var(--accent-ink); text-decoration: none; font-weight: 500; }
a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--accent-soft); color: var(--ink-900); }

.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ================================================================ PRIMITIVES */

/* --- Kicker: a small coloured eyebrow, sentence case --- */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-0);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-ink);
}
.kicker::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

/* --- Section header: large, quiet, no rule by default --- */
.hud-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-5);
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.hud-title .hud-title__meta {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: var(--fs-1);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-500);
}

.rule { height: 1px; background: var(--line); border: 0; margin: var(--sp-4) 0; }
.rule--strong { background: var(--line-strong); }

/* --- Emphasis frame: a soft tinted wash instead of brackets --- */
.hud-frame {
  position: relative;
  background-color: var(--accent-soft);
  border-color: transparent !important;
}
.hud-frame--accent { box-shadow: inset 0 0 0 1.5px var(--accent); }

/* --- Chamfers: rounded here; kept for API parity --- */
.clip-notch { border-radius: var(--radius-lg); }
.clip-notch-tr { border-radius: var(--radius-lg); }

/* --- Hazard: a soft gradient bar, not candystripe --- */
.hazard {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-hi));
  border-radius: 999px;
}
.hazard--thin { background-image: linear-gradient(90deg, var(--accent), var(--accent-hi)); border-radius: 999px; }

/* --- Dot grid: very faint --- */
.dotgrid {
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-color: var(--panel-2);
}
.dotgrid--accent {
  background-image: none;
  background-color: var(--accent-soft);
  border-radius: var(--radius);
}

/* --- Legend --- */
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-0);
  color: var(--ink-500);
}
.legend__key { display: inline-flex; align-items: center; gap: var(--sp-2); }
.legend__glyph {
  display: inline-grid;
  place-items: center;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border: 0;
  border-radius: 6px;
  background: var(--panel-3);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-600);
}

/* --- Focus ring: soft halo --- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* --- Utilities --- */
.stack > * + * { margin-top: var(--sp-3); }
.row { display: flex; gap: var(--sp-3); align-items: center; }
.muted { color: var(--ink-500); }
.caps  { text-transform: uppercase; letter-spacing: var(--tracking-wide); }