/**
 * QbitX Design System — Eclipse QX
 * Cold, quiet, exact. Crimson only where it matters. See DESIGN.md.
 */

/* ── Type ── */
/* Self-hosted, subset, variable. No font CDN. */

@font-face {
  font-family: 'Noto Serif Display';
  src: url('/assets/fonts/noto-serif-display-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Archivo';
  src: url('/assets/fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 87.5% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Monaspace Neon';
  src: url('/assets/fonts/monaspace-neon-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

[hidden] { display: none !important; }

:root {
  color-scheme: dark;

  /* ── Brand palette ── */
  --abyss: #080B10;
  --charcoal: #151A21;
  --charcoal-high: #1C232C;
  --storm: #344452;
  --storm-dim: #232E39;
  --mist: #A8B6C4;
  --silver: #E7EDF2;
  --crimson: #8C2034;
  --signal: #F16B78;

  /* ── Semantic surfaces ── */
  --bg-primary: var(--abyss);
  --bg-surface: var(--charcoal);
  --bg-elevated: var(--charcoal-high);
  --bg-input: #0C1117;

  /* ── Text ── */
  --text-primary: var(--silver);
  --text-secondary: var(--mist);
  /* 4.74:1 on charcoal-high, the darkest surface it lands on. #6A7B8B read
     4.01:1 there and failed small text. */
  --text-muted: #7B8FA1;
  --text-on-primary: var(--silver);

  /* ── Accents ──
     --accent-primary carries text and icons (6.7:1 on abyss).
     --accent-primary-strong is a fill or a rule only; it fails as text. */
  --accent-primary: var(--signal);
  --accent-primary-hover: #F58C96;
  --accent-primary-strong: var(--crimson);
  --accent-secondary: var(--storm);
  --accent-success: #57B894;
  --accent-warning: #D9A441;
  --accent-error: var(--signal);
  --accent-cyan: #6FA8B8;
  --accent-orange: #D98C5F;

  /* ── Structure ── */
  --border: var(--storm-dim);
  --border-hover: var(--storm);

  /* ── Typography ── */
  --font-display: 'Noto Serif Display', Georgia, 'Times New Roman', serif;
  --font-ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Monaspace Neon', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 15px;
  --text-xl: 18px;
  --text-2xl: 24px;

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;

  --leading-tight: 1.3;
  --leading-normal: 1.4;
  --leading-relaxed: 1.6;

  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.55);

  /* ── Motion — the identity's motion language (DESIGN.md) ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-reveal: 120ms;
  --motion-scan: 180ms;
  --motion-analyze: 240ms;
  --motion-trace: 300ms;
  --motion-settle: 400ms;
  --transition-fast: var(--motion-reveal) var(--ease-out);
  --transition-normal: var(--motion-scan) var(--ease-out);

  /* ── Layout ── */
  --sidebar-width: 240px;
  --header-height: 56px;
  --surface-opacity: 92%;
  --elevated-surface-opacity: 94%;
  --panel-blur: 2px;

  /* ── Overlays ── */
  --selection-bg: rgba(140, 32, 52, 0.55);
  --sidebar-active-bg: rgba(140, 32, 52, 0.16);
  --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.33);
  --backdrop: rgba(3, 6, 11, 0.74);

  /* Text on a crimson fill. Stays light in both themes. */
  --on-crimson: var(--silver);
  --mark: url('/assets/branding/qx-silver.svg');
}

/* ── Light theme ──
   Snow and ink. The brand names keep their roles, not their values: --abyss is
   still the page, --silver still the primary text. Crimson is unchanged and
   now clears 8:1 as text, so --signal darkens to stay a distinct link colour.
   Contrast (on page #F3F5F8 / surface #FFFFFF / elevated #E8ECF1):
   silver 16.4 / 17.9 / 15.1, mist 7.3 / 8.0 / 6.7, muted 5.2 / 5.6 / 4.7,
   signal 6.4 / 7.0 / 5.9, success 5.3, warning 5.6, snow on crimson 8.1. */
:root[data-theme="light"] {
  color-scheme: light;

  --abyss: #F3F5F8;
  --charcoal: #FFFFFF;
  --charcoal-high: #E8ECF1;
  --storm: #B7C1CB;
  --storm-dim: #D8DEE5;
  --mist: #45525F;
  --silver: #111820;
  --signal: #A8263D;

  --bg-input: #FAFBFC;
  --text-muted: #5B6977;

  --accent-primary-hover: var(--crimson);
  /* Error text sits on its own tint and on selected rows. Crimson keeps it over 4.5:1 there. */
  --accent-error: var(--crimson);
  --accent-success: #1C7450;
  --accent-warning: #85590A;
  --accent-cyan: #24697A;
  --accent-orange: #A1471C;

  --shadow-sm: 0 1px 2px rgba(17, 24, 32, 0.06);
  --shadow-md: 0 2px 8px rgba(17, 24, 32, 0.08);
  --shadow-float: 0 24px 60px rgba(17, 24, 32, 0.10), 0 2px 6px rgba(17, 24, 32, 0.04);
  --backdrop: rgba(17, 24, 32, 0.32);

  --selection-bg: rgba(140, 32, 52, 0.18);
  --sidebar-active-bg: rgba(140, 32, 52, 0.07);

  --on-crimson: #F3F5F8;
  --mark: url('/assets/branding/qx-black.svg');
}

/* The mark ships as silver <img>s. On light it is black, per the identity. */
:root[data-theme="light"] img[src$="qx-silver.svg"] { filter: brightness(0); opacity: 0.94; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  /* The help drawer parks off-canvas at translateX(100%); clip keeps it from
     widening the document without turning body into a scroll container the way
     overflow-x: hidden would (which breaks position: sticky). */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
code, pre, kbd, samp { font-family: var(--font-mono); }
::selection { background-color: var(--selection-bg); color: var(--text-primary); }

/* Focus is never removed. */
:focus-visible {
  outline: 2px solid var(--accent-primary);
  outline-offset: 2px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-surface); }
::-webkit-scrollbar-thumb { background: var(--storm-dim); border-radius: var(--radius-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--storm); }

/* Theme switch crossfade (View Transitions, where supported). */
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--motion-analyze); animation-timing-function: var(--ease-out); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}