/* theme.css — canonical design tokens for username.md. Load FIRST on every page.
   Dual theme (HC-1334, ADR-0001): dark is the brand default; light follows the
   OS unless the user chooses via the nav toggle (localStorage "umd-theme",
   FOUC guard inline in each page head). Light values are the contrast-checked
   "terminal at noon" palette (docs/light-mode-tokens.md, HC-1234/HC-1235).
   Styling law: pages consume these tokens — no per-page :root blocks, no raw
   hex outside this file (terminal group excepted, it never re-themes).
   The purple ban (HC-1171) and green=machine-trust / amber=human-CTA
   semantics hold in BOTH themes. */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #101B26;
  --surface: #18222D;
  --surface-raised: #202C37;
  --surface-hover: #26323E;
  --border: #2E3B49;
  --border-strong: #5A6E80;

  /* text */
  --text: #E6EDF3;
  --text-muted: #94A3B8;
  --text-placeholder: #64748B;

  /* accents — green = machine trust, amber = human CTA. Never flipped. */
  --accent: #4ADE80;
  --accent-hover: #6BEA96;
  --accent-soft: rgba(74, 222, 128, .10);
  --live-dot: #4ADE80;
  --cta: #F5B942;
  --cta-hover: #FFC95C;
  --on-accent: #101B26;

  /* status */
  --success: #3FB950;
  --warn: #E3B341;
  --warn-soft: rgba(227, 179, 65, .10);
  --danger: #F85149;
  --gold: #E3B341;

  /* chrome */
  --nav-bg: rgba(16, 27, 38, .85);
  --grid-line: #18222D;
  --selection-bg: #1F4B72;
  --selection-text: #E6EDF3;
  --scrim: rgba(4, 10, 16, .6);
  --card-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  --focus-inner: var(--bg);

  /* terminal group — the brand signature stays dark in BOTH themes.
     Deliberately not overridden by the light theme. */
  --terminal-bg: #18222D;
  --terminal-bar: #202C37;
  --terminal-text: #E6EDF3;
  --terminal-muted: #94A3B8;
  --terminal-green: #4ADE80;
  --terminal-cyan: #4ADE80;
  --terminal-orange: #F5B942;

  /* legacy aliases — old page markup keeps rendering during fleet-sync skew.
     New markup must use the canonical names above. */
  --muted: var(--text-muted);
  --green: var(--accent);
  --cyan: var(--accent);
  --orange: var(--cta);
  --btn-text: var(--on-accent);
  --btn-text-on-accent: var(--on-accent);
  --btn-text-on-gold: var(--on-accent);
  --cta-fill: var(--cta);
  --overlay: var(--surface-raised);
  --code-bg: var(--surface-raised);
  --example-bg: var(--surface-raised);
  --step-bg: var(--accent-soft);
  --tag-bg-accent: var(--accent-soft);
  --tag-bg-cyan: var(--accent-soft);
  --tag-bg-orange: var(--warn-soft);
  --input-placeholder: var(--text-placeholder);
  --hover-border: var(--border-strong);
}

/* Light theme — declared twice on purpose (OS preference path + explicit
   user choice path). Keep both blocks identical; see LIGHT_THEME markers. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* LIGHT_THEME (keep in sync with [data-theme="light"] below) */
    color-scheme: light;
    --bg: #EEF3F7;
    --surface: #FFFFFF;
    --surface-raised: #F7FAFC;
    --surface-hover: #E2EAF0;
    --border: #D5DEE6;
    --border-strong: #6E8092;
    --text: #101B26;
    --text-muted: #3D4C5C;
    --text-placeholder: #5A6B7C;
    --accent: #12793A;
    --accent-hover: #116D33;
    --accent-soft: rgba(18, 121, 58, .10);
    --live-dot: #16A34A;
    --cta: #D07208;
    --cta-hover: #CC6E06;
    --on-accent: #101B26;
    --success: #1A7F37;
    --warn: #946300;
    --warn-soft: rgba(148, 99, 0, .10);
    --danger: #CF222E;
    --gold: #946300;
    --nav-bg: rgba(238, 243, 247, .85);
    --grid-line: #E6ECF1;
    --selection-bg: #C9DFF2;
    --selection-text: #101B26;
    --scrim: rgba(16, 27, 38, .4);
    --card-shadow: 0 8px 24px rgba(16, 27, 38, .12);
    --focus-inner: #FFFFFF;
  }
}
[data-theme="light"] {
  /* LIGHT_THEME (keep in sync with the media-query block above) */
  color-scheme: light;
  --bg: #EEF3F7;
  --surface: #FFFFFF;
  --surface-raised: #F7FAFC;
  --surface-hover: #E2EAF0;
  --border: #D5DEE6;
  --border-strong: #6E8092;
  --text: #101B26;
  --text-muted: #3D4C5C;
  --text-placeholder: #5A6B7C;
  --accent: #12793A;
  --accent-hover: #116D33;
  --accent-soft: rgba(18, 121, 58, .10);
  --live-dot: #16A34A;
  --cta: #D07208;
  --cta-hover: #CC6E06;
  --on-accent: #101B26;
  --success: #1A7F37;
  --warn: #946300;
  --warn-soft: rgba(148, 99, 0, .10);
  --danger: #CF222E;
  --gold: #946300;
  --nav-bg: rgba(238, 243, 247, .85);
  --grid-line: #E6ECF1;
  --selection-bg: #C9DFF2;
  --selection-text: #101B26;
  --scrim: rgba(16, 27, 38, .4);
  --card-shadow: 0 8px 24px rgba(16, 27, 38, .12);
  --focus-inner: #FFFFFF;
}

/* base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection-bg); color: var(--selection-text); }
::placeholder { color: var(--text-placeholder); }

:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--focus-inner), 0 0 0 4px var(--accent);
  border-radius: 4px;
}

/* theme toggle — CSS-drawn sun/moon, no image request */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  background: transparent; border: 1px solid var(--border-strong);
  border-radius: 8px; cursor: pointer; color: var(--text);
  transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle .tt-icon {
  position: relative; display: block; width: 14px; height: 14px;
  border-radius: 50%;
  /* moon (shown in dark mode: offer is "light", icon shows current) */
  box-shadow: inset -4px -3px 0 0 var(--text);
}
[data-theme="light"] .theme-toggle .tt-icon { box-shadow: none; background: var(--cta); }
[data-theme="light"] .theme-toggle .tt-icon::after {
  content: ''; position: absolute; inset: -5px;
  background:
    radial-gradient(circle 1.5px at 50% 0, var(--cta) 95%, transparent),
    radial-gradient(circle 1.5px at 50% 100%, var(--cta) 95%, transparent),
    radial-gradient(circle 1.5px at 0 50%, var(--cta) 95%, transparent),
    radial-gradient(circle 1.5px at 100% 50%, var(--cta) 95%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .tt-icon { box-shadow: none; background: var(--cta); }
  :root:not([data-theme="dark"]) .theme-toggle .tt-icon::after {
    content: ''; position: absolute; inset: -5px;
    background:
      radial-gradient(circle 1.5px at 50% 0, var(--cta) 95%, transparent),
      radial-gradient(circle 1.5px at 50% 100%, var(--cta) 95%, transparent),
      radial-gradient(circle 1.5px at 0 50%, var(--cta) 95%, transparent),
      radial-gradient(circle 1.5px at 100% 50%, var(--cta) 95%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  :root {
    --bg: #FFFFFF; --surface: #FFFFFF; --surface-raised: #F7FAFC;
    --border: #D5DEE6; --text: #101B26; --text-muted: #3D4C5C;
    --accent: #12793A; --cta: #D07208;
  }
  body::before, nav, .cta-nav, #community-banner, .theme-toggle { display: none !important; }
  body { background: #fff; }
}