/* Reintech — Design tokens (web / public surfaces)
 *
 * Dark theme with muted-earthy axis palette + all-sans typography.
 * Axis vars keyed by SpectrumDelta.key — `systems_thinking`, `orientation`,
 * `antifragility`, `security_awareness`, `ai_symbiosis`, `reciprocity`.
 */

:root[data-theme="dark"] {
  /* Deep warm neutral — serious publication at night */
  --bg: #0e0d0b;
  --surface: #16140f;
  --surface-2: #1e1b15;
  /* Ink ramp — lifted for higher contrast / less fade. Primary brightened,
     and the muted tiers (-2 secondary, -3 the "faded" workhorse for eyebrows
     & blurbs, -4 placeholders) pulled markedly closer to primary while still
     preserving a readable hierarchy. */
  --ink: #e7e0d2;
  --ink-2: #c4bcab;
  --ink-3: #9b9281;
  --ink-4: #6c6557;
  --border: #332e24;
  --border-2: #46402f;
  --rule: #e7e0d2;

  /* Six axes — keep these in lockstep with `talent_spectrum_deltas.color`
     (see db/seeds/spectrum_deltas.rb). The base hex is the single source of
     truth across landing, dashboard, and admin. -soft / -ink derivatives use
     color-mix so adjusting the base auto-propagates. */
  --ax-systems_thinking: #5db2f7;
  --ax-systems_thinking-soft: color-mix(in oklab, #5db2f7 22%, var(--bg));
  --ax-systems_thinking-ink: color-mix(in oklab, #5db2f7 80%, var(--ink));

  --ax-orientation: #f9b64f;
  --ax-orientation-soft: color-mix(in oklab, #f9b64f 22%, var(--bg));
  --ax-orientation-ink: color-mix(in oklab, #f9b64f 80%, var(--ink));

  --ax-antifragility: #fc7756;
  --ax-antifragility-soft: color-mix(in oklab, #fc7756 22%, var(--bg));
  --ax-antifragility-ink: color-mix(in oklab, #fc7756 80%, var(--ink));

  --ax-security_awareness: #99b860;
  --ax-security_awareness-soft: color-mix(in oklab, #99b860 22%, var(--bg));
  --ax-security_awareness-ink: color-mix(in oklab, #99b860 80%, var(--ink));

  --ax-ai_symbiosis: #d892e8;
  --ax-ai_symbiosis-soft: color-mix(in oklab, #d892e8 22%, var(--bg));
  --ax-ai_symbiosis-ink: color-mix(in oklab, #d892e8 80%, var(--ink));

  --ax-reciprocity: #73ce95;
  --ax-reciprocity-soft: color-mix(in oklab, #73ce95 22%, var(--bg));
  --ax-reciprocity-ink: color-mix(in oklab, #73ce95 80%, var(--ink));

  /* Type (all-sans) */
  --f-display: 'Inter Tight', -apple-system, system-ui, sans-serif;
  --f-body: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --f-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* Scale */
  --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: 128px;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
}

/* Baseline */
html[data-theme="dark"], body.web-body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.web-body {
  /* `clip` (not `hidden`) prevents horizontal overflow without turning the
     body into a scroll container — which would break viewport-relative
     `position: sticky` (e.g. the playground's "Selected scope" panel). */
  overflow-x: clip;
  margin: 0;
}

body.web-body * { box-sizing: border-box; }

/* Typography */
.web-body .display { font-family: var(--f-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.02; }
.web-body .serif { font-family: var(--f-display); font-weight: 400; }
.web-body .mono { font-family: var(--f-mono); font-feature-settings: 'ss01'; letter-spacing: -0.01em; }
.web-body .eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.web-body .muted { color: var(--ink-3); }
.web-body .ink-2 { color: var(--ink-2); }

.web-body a { color: inherit; text-decoration: none; }
.web-body button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }

/* Layout helpers */
.web-container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.web-container-narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 640px) {
  .web-container, .web-container-narrow { padding: 0 20px; }
}

.web-rule { border: none; border-top: 1px solid var(--border); margin: 0; }

/* Buttons — specificity bumped with .web-body prefix so they beat
   .web-body a { color: inherit } and Tailwind preflight button resets. */
.web-body .web-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 44px; padding: 0 20px;
  font-family: var(--f-body); font-size: 14px; font-weight: 500;
  border-radius: 999px;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
}
.web-body .web-btn-primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.web-body .web-btn-primary:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--bg); }
.web-body .web-btn-ghost { background: transparent; color: var(--ink); border-color: var(--border-2); }
.web-body .web-btn-ghost:hover { background: var(--surface); color: var(--ink); }
.web-body .web-btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.web-body .web-btn-lg { height: 52px; padding: 0 28px; font-size: 15px; }
/* Disabled state — used for gated CTAs (e.g. "Add role details" before the
   role spectrum is sufficiently defined). Click is blocked in JS. */
.web-body .web-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Form fields */
.web-field { display: flex; flex-direction: column; gap: 6px; }
.web-field label { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.web-field-note { text-transform: none; letter-spacing: 0; color: var(--ink-4); }
/* Required-field marker on a label. */
.web-field-req { color: var(--ax-antifragility); margin-left: 3px; }
.web-field-legend { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.web-input, .web-textarea, .web-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: var(--f-body); font-size: 15px; color: var(--ink);
  transition: border-color 0.15s;
}
.web-input:focus, .web-textarea:focus, .web-select:focus { outline: none; border-color: var(--ink); }
.web-textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.web-input::placeholder, .web-textarea::placeholder { color: var(--ink-4); }