/* ═══════════════════════════════════════════════════════════════════
   WP Site Beam — Design Exploration tokens
   Refined from existing shared.css + app.html :root tokens.
   Dark + Light parity, softer borders, tighter scale.
   ═══════════════════════════════════════════════════════════════════ */

:root,
html[data-theme="dark"] {
  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.30), 0 1px 2px rgba(0,0,0,.20);
  --shadow-md:   0 4px 12px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.20);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.40), 0 4px 8px rgba(0,0,0,.25);
  /* Surfaces */
  --bg:           #060910;
  --surface:      #0d1623;
  --surface-2:    #121e2e;
  --surface-3:    #172337;
  --border:       #1e3560;
  --border-2:     #2a4570;

  /* Brand */
  --orange:       #f0a830;
  --orange-dim:   rgba(240,168,48,.10);
  --orange-soft:  rgba(240,168,48,.22);
  --beam:         #00cfef;
  --beam-dim:     rgba(0,207,239,.10);

  /* Semantic */
  --green:        #00d97a;
  --green-dim:    rgba(0,217,122,.09);
  --red:          #ff7070;
  --red-dim:      rgba(255,112,112,.10);
  --warn:         #f5b800;
  --warn-dim:     rgba(245,184,0,.10);

  /* SA palette */
  --rose:         #ff6b9d;
  --rose-dim:     rgba(255,107,157,.10);
  --purple:       #c4a0ff;
  --purple-dim:   rgba(196,160,255,.10);

  /* Type */
  --text:         #e8f0fa;
  --text-2:       #b8ccdf;
  --muted:        #9dbbd2;
  --dim:          #5878a0;

  color-scheme: dark;
}

html[data-theme="light"] {
  /* ── Orange accent remapped to beam in light mode ────────────────
     Inline styles throughout the app use var(--orange), var(--orange-dim),
     var(--orange-soft). Remapping here means ALL components respond
     to the theme without any component code changes.
     Dark mode keeps --orange as amber (#f0a830). ── */
  --orange:       #0079a3;              /* beam value — 4.93:1 on white */
  --orange-dim:   rgba(0,121,163,.08);  /* beam-dim */
  --orange-soft:  rgba(0,121,163,.18);  /* beam-soft, slightly stronger than dim */
  /* Light mode shadows — softer than dark mode defaults */
  --shadow-sm:   0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:   0 4px 12px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);
  --bg:           #f6f8fb;
  --surface:      #ffffff;
  --surface-2:    #f0f3f8;
  --surface-3:    #e5ebf3;
  --border:       #d5dde8;
  --border-2:     #b8c5d6;

  --orange:       #9b6200;  /* 4.84:1 on white — AA */
  --orange-dim:   rgba(155,98,0,.10);
  --orange-soft:  rgba(155,98,0,.22);   /* boosted for pill visibility */
  --beam:         #0079a3;
  --beam-dim:     rgba(0,121,163,.08);

  --green:        #0a7a4a;  /* 4.5:1 on white — AA */
  --green-dim:    rgba(10,122,74,.08);
  --red:          #c53030;
  --red-dim:      rgba(197,48,48,.08);
  --warn:         #946300;
  --warn-dim:     rgba(148,99,0,.10);

  --rose:         #c0357b;
  --rose-dim:     rgba(192,53,123,.08);
  --purple:       #6a48cc;
  --purple-dim:   rgba(106,72,204,.08);

  --text:         #142036;
  --text-2:       #2e4060;
  --muted:        #445d80;    /* was #4a6284 — 4.9:1 on --bg, passes AA */
  --dim:          #58708f;    /* was #6d84a4 — 4.5:1 on --bg, passes AA for normal text */

  color-scheme: light;
}

/* ── Type + spacing scale ─────────────────────────────────────── */
:root {
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;

  --font-brand: 'Orbitron', ui-monospace, monospace;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-body:  'Inter', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Font-weight tokens — 2026-05-19 ────────────────────────────
     Standard 5-step scale. Use semantic name in code, not numeric.

     A11Y NOTE: small text (under .85rem) gets thin/anemic at weight
     400 in light mode especially. Use --fw-small-* tokens for
     anything labeled as small mono labels, hints, captions, table
     header labels, stat row labels, badge text, etc. Going from
     400 → 500 fixes ~80% of "looks too light" complaints. Mono
     fonts (JetBrains Mono) tolerate higher weights better because
     their letterforms are designed for it. */
  --fw-regular:    400;
  --fw-medium:     500;
  --fw-semibold:   600;
  --fw-bold:       700;
  --fw-extrabold:  800;

  /* Semantic font-weight applications — use these in components
     instead of hardcoding 500/600/etc. Centralizing makes it
     trivial to globally adjust (e.g. when SA Theme Engine ships). */
  --fw-body:         var(--fw-regular);    /* Default body text 14px+ */
  --fw-body-small:   var(--fw-medium);     /* 12–13px body — needs boost */
  --fw-label:        var(--fw-semibold);   /* Form labels, card titles */
  --fw-label-small:  var(--fw-semibold);   /* All-caps small labels (.62–.72rem) */
  --fw-mono:         var(--fw-semibold);   /* JetBrains Mono — always heavier */
  --fw-mono-small:   var(--fw-semibold);   /* Small mono (.66–.74rem) */
  --fw-button:       var(--fw-semibold);   /* Button labels */
  --fw-stat-value:   var(--fw-bold);       /* Big stat numbers */
  --fw-tag:          var(--fw-semibold);   /* Tag/pill text */
  --fw-badge:        var(--fw-bold);       /* Status badges (PENDING, DONE) */
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.875rem;  /* 14px at default root — scales with a11y text-size */
  line-height: 1.5;
}
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; }
a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--beam); outline-offset: 2px; border-radius: 4px; }

/* ── Scrollbars (subtle) ──────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* ── Motion ───────────────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: .01ms!important; transition-duration: .01ms!important; }
}

/* ══ A11Y TWEAKS ═══════════════════════════════════════════════
   Customer-facing accessibility toggles (Tweaks → "Accessibility"):
     body[data-textsize]  normal | large | xlarge   — scales base font
     body[data-contrast]  normal | high             — boosts text + borders
     body[data-motion]    normal | reduced          — strips transitions
   All three are cascading, so every component that inherits from --text,
   --border, 1em sizing, etc. gets it for free. */

/* Text size — set on <html> so rem values cascade correctly.
   Default browser root is 16px; we bump to 18px / 20px.
   Everything sized in rem scales proportionally across the entire SaaS. */
html[data-textsize="large"]  { font-size: 18px; }
html[data-textsize="xlarge"] { font-size: 20px; }

/* body font-size uses 1rem so it inherits the scale */
html[data-textsize="large"]  body,
html[data-textsize="xlarge"] body { font-size: 1rem; }

/* High-contrast: override the muted/dim greys with AA/AAA-passing values
   and thicken borders. Works in both themes. */
html[data-contrast="high"][data-theme="dark"] {
  --text:    #ffffff;
  --text-2:  #e4eefb;
  --muted:   #cfe0f2;
  --dim:     #a8c0d8;
  --border:  #3a5a8f;
  --border-2:#5a7ab0;
}
html[data-contrast="high"][data-theme="light"] {
  --text:    #000000;
  --text-2:  #0a1220;
  --muted:   #1f2b42;
  --dim:     #2c3e5c;
  --border:  #6a7b94;
  --border-2:#3c4f6e;
}
html[data-contrast="high"] :focus-visible {
  outline: 3px solid var(--beam);
  outline-offset: 3px;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .btn,
html[data-contrast="high"] input,
html[data-contrast="high"] select,
html[data-contrast="high"] textarea {
  border-width: 2px !important;
}

/* Reduced motion (user-chosen, independent of OS setting) */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* ── Utility ──────────────────────────────────────────────────── */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.mono { font-family: var(--font-mono); font-weight: var(--fw-mono); }
.brand-type { font-family: var(--font-brand); letter-spacing: 2px; text-transform: uppercase; }