/* Starfield / NASA-Punk theme swatch — extracted directly from the real
   shared design-system stylesheet in github.com/ozooma10/osf-ui
   (frontend/src/shared-kit/osfui.css), a Starfield (Bethesda) mod UI kit.
   Unlike the other swatches here (built from mood-board text
   descriptions), these are the actual --osf-* hex/rgba tokens and
   component patterns that ship in that project: flat translucent
   blue-black panels, hairline rules, hard rectangular edges (radius
   zeroed everywhere), white-forward monochrome type with a quiet
   ice-blue HUD accent, and buttons that invert to solid white on
   hover/press the way Starfield's own menu entries do. Fonts kept as
   their documented Windows-system-face stack (network-free by design
   in the source project) with Saira Semi Condensed — already their
   own third fallback — added as a webfont so the DIN-ish condensed
   look actually renders cross-platform instead of degrading to
   generic sans-serif on non-Windows machines. */

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

:root[data-theme="starfield"] {
  --bg: #05070a;
  --surface: #10141b;
  --surface-raised: #1d232d;
  --border: rgba(242,239,233,0.12);
  --text: #f2efe9;
  --text-muted: #9aa3ad;
  --accent: #9fc7dc;
  --accent-dim: rgba(159,199,220,0.12);
  --success: #6fae6a;
  --success-dim: #6fae6a26;
  --danger: #c8503a;
  --danger-dim: #c8503a26;
  --blocked: #4b7ea3;
  --radius: 0px;
  --mono: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --display: 'Saira Semi Condensed', 'Bahnschrift', 'Segoe UI Semibold', sans-serif;
  --body: 'Inter', 'Segoe UI', sans-serif;
}

[data-theme="starfield"] body {
  background:
    linear-gradient(180deg, #0a0d12 0%, #05070a 100%);
}

[data-theme="starfield"] .sidebar {
  background: #0a0d12;
  border-right: 1px solid var(--border);
}
[data-theme="starfield"] .brand {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 17px;
}
[data-theme="starfield"] .brand .dot { color: var(--accent); }
[data-theme="starfield"] .nav-link {
  font-family: var(--display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  border-left: 2px solid transparent;
}
[data-theme="starfield"] .nav-link:hover {
  color: var(--accent);
}
[data-theme="starfield"] .nav-link.active {
  border-left-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

[data-theme="starfield"] .page-title {
  font-family: var(--display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-theme="starfield"] .page-subtitle {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Flat glass card, hairline frame — straight from .osf-card */
[data-theme="starfield"] .card,
[data-theme="starfield"] .stat,
[data-theme="starfield"] .day-entry-card,
[data-theme="starfield"] .week-day-col,
[data-theme="starfield"] dialog {
  background: rgba(13,17,23,0.82);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
}
[data-theme="starfield"] .stat-value {
  font-family: var(--display);
  font-weight: 700;
  color: var(--accent);
}
[data-theme="starfield"] .stat-label {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* Buttons — uppercase, invert to bone/white on hover like the game's
   own menu entries, dim to steel on press. */
[data-theme="starfield"] .btn {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-muted);
  background: rgba(16,20,27,0.6);
  border: 1px solid rgba(242,239,233,0.22);
  border-radius: 0;
  transition: color 120ms, background 120ms, border-color 120ms;
}
[data-theme="starfield"] .btn:hover {
  color: #05070a;
  background: var(--text);
  border-color: var(--text);
}
[data-theme="starfield"] .btn:active { background: #9aa3ad; border-color: #9aa3ad; }
[data-theme="starfield"] .btn-primary {
  color: #05070a;
  background: var(--accent);
  border-color: var(--accent);
}
[data-theme="starfield"] .btn-primary:hover { background: #c9e4f2; border-color: #c9e4f2; }
[data-theme="starfield"] .btn-danger {
  color: var(--danger);
  background: transparent;
  border-color: rgba(200,80,58,0.5);
}
[data-theme="starfield"] .btn-danger:hover {
  color: var(--text);
  background: rgba(200,80,58,0.24);
  border-color: var(--danger);
}

[data-theme="starfield"] input,
[data-theme="starfield"] select,
[data-theme="starfield"] textarea {
  background: rgba(5,7,10,0.52);
  border: 1px solid rgba(242,239,233,0.22);
  border-radius: 0;
  color: var(--text);
}
[data-theme="starfield"] .btn:focus-visible,
[data-theme="starfield"] a:focus-visible,
[data-theme="starfield"] input:focus-visible,
[data-theme="starfield"] select:focus-visible,
[data-theme="starfield"] textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px #05070a, 0 0 0 3px var(--accent);
}

[data-theme="starfield"] th {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

[data-theme="starfield"] .calendar-day { border-radius: 0; }
[data-theme="starfield"] .calendar-day.is-today { border-color: var(--accent); }
[data-theme="starfield"] .calendar-day.is-selected {
  background: var(--accent);
  color: #05070a;
  font-weight: 700;
}
[data-theme="starfield"] .calendar-day.has-time:not(.is-selected)::after {
  background: var(--accent);
  border-radius: 0;
}

[data-theme="starfield"] .ticket-key {
  font-family: var(--mono);
  letter-spacing: 0.06em;
  color: var(--accent);
}