/* ============================================================================
   QUANT GUILD — DESIGN TOKENS  (concept "01-prime")
   ----------------------------------------------------------------------------
   Every token is namespaced --qg-* so it cannot collide with the legacy
   :root variables in styles.css (--primary, --text-dark, …) or dark_mode.css.

   Light values live on :root. Dark values are re-declared under
   html[data-theme='dark'] so every component built on these tokens themes
   itself with no extra rules. static/js/theme-init.js sets data-theme before
   first paint, so there is no flash of the wrong theme.

   Palette is locked: Guild Blue + Guild Gold + neutrals. Semantic
   positive/negative are for data UI only.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- brand ------------------------------------------------------------ */
  --qg-blue: #004aad;
  --qg-blue-deep: #003a8c;
  --qg-blue-bright: #0066cc;
  --qg-abyss: #00142e;
  --qg-abyss-2: #001b3d;
  --qg-wash: #e8f0fb;
  --qg-wash-2: #f2f6fd;
  --qg-gold: #ffcb05;
  --qg-gold-deep: #e6b700;

  /* ---- neutral ramp (raw) ---------------------------------------------- */
  --qg-ink: #0c111b;
  --qg-body: #3d4759;
  --qg-muted: #6b7689;
  --qg-faint: #9aa4b4;
  --qg-hairline: #e4e8ef;
  --qg-hairline-soft: #eef1f6;
  --qg-white: #ffffff;
  --qg-canvas: #f8f9fc;

  /* ---- semantic (data UI only) ----------------------------------------- */
  --qg-pos: #16a34a;
  --qg-neg: #dc2626;
  --qg-pos-soft: rgba(22, 163, 74, 0.08);
  --qg-pos-line: rgba(22, 163, 74, 0.22);
  --qg-neg-soft: rgba(220, 38, 38, 0.07);
  --qg-neg-line: rgba(220, 38, 38, 0.2);

  /* ---- themed roles ----------------------------------------------------
     Components reference these, never the raw ramp, so dark mode is a
     single re-declaration below. */
  --qg-surface: var(--qg-white);          /* cards, panels, sidebar */
  --qg-surface-2: var(--qg-canvas);       /* page canvas, table heads */
  --qg-surface-3: var(--qg-hairline-soft);/* tracks, inset wells */
  --qg-surface-sunken: var(--qg-canvas);
  --qg-surface-tint: var(--qg-wash-2);    /* blue-tinted surface */
  --qg-surface-tint-line: #d8e4f8;
  --qg-page: var(--qg-white);

  --qg-text: var(--qg-ink);
  --qg-text-body: var(--qg-body);
  --qg-text-muted: var(--qg-muted);
  --qg-text-faint: var(--qg-faint);
  --qg-text-on-brand: #ffffff;

  --qg-line: var(--qg-hairline);
  --qg-line-soft: var(--qg-hairline-soft);
  --qg-line-strong: #d3dae6;

  --qg-accent: var(--qg-blue);            /* interactive brand */
  --qg-accent-hover: var(--qg-blue-deep);
  --qg-accent-soft: var(--qg-wash-2);
  --qg-accent-line: #c8d9f3;
  --qg-link: var(--qg-blue);

  --qg-gold-soft: rgba(255, 203, 5, 0.14);
  --qg-gold-line: rgba(230, 183, 0, 0.4);
  --qg-gold-text: #8a6b00;

  /* ---- type scale ------------------------------------------------------ */
  --qg-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --qg-font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --qg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --qg-fs-display: 64px;
  --qg-fs-h1: 42px;
  --qg-fs-h2: 30px;
  --qg-fs-h3: 19px;
  --qg-fs-h4: 16px;
  --qg-fs-lede: 19px;
  --qg-fs-base: 15px;
  --qg-fs-sm: 13.5px;
  --qg-fs-xs: 12px;
  --qg-fs-eyebrow: 12px;

  --qg-lh-tight: 1.15;
  --qg-lh-snug: 1.35;
  --qg-lh-base: 1.6;
  --qg-lh-relaxed: 1.72;

  --qg-ls-display: -0.035em;
  --qg-ls-h: -0.028em;
  --qg-ls-body: -0.008em;
  --qg-ls-eyebrow: 0.12em;

  /* ---- spacing (4px base) ---------------------------------------------- */
  --qg-s1: 4px;
  --qg-s2: 8px;
  --qg-s3: 12px;
  --qg-s4: 16px;
  --qg-s5: 20px;
  --qg-s6: 24px;
  --qg-s7: 32px;
  --qg-s8: 40px;
  --qg-s9: 56px;
  --qg-s10: 72px;
  --qg-s11: 96px;
  --qg-s12: 120px;

  /* ---- radii ----------------------------------------------------------- */
  --qg-r-ctl: 8px;
  --qg-r-btn: 10px;
  --qg-r-card: 12px;
  --qg-r-panel: 16px;
  --qg-r-pill: 999px;

  /* ---- elevation ------------------------------------------------------- */
  --qg-sh-hair: 0 1px 2px rgba(12, 17, 27, 0.04);
  --qg-sh-card: 0 1px 2px rgba(12, 17, 27, 0.04), 0 12px 32px rgba(12, 17, 27, 0.06);
  --qg-sh-lift: 0 1px 2px rgba(12, 17, 27, 0.05), 0 20px 48px rgba(12, 17, 27, 0.09);
  --qg-sh-float: 0 2px 4px rgba(12, 17, 27, 0.04), 0 28px 68px rgba(12, 17, 27, 0.12);
  --qg-sh-btn: 0 1px 2px rgba(0, 74, 173, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --qg-sh-btn-hover: 0 2px 6px rgba(0, 74, 173, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.2);

  /* ---- focus ----------------------------------------------------------- */
  --qg-focus: var(--qg-blue-bright);
  --qg-focus-ring: 2px solid var(--qg-focus);
  --qg-focus-offset: 3px;

  /* ---- layout ---------------------------------------------------------- */
  --qg-maxw: 1180px;
  --qg-gutter: 32px;
  --qg-nav-h: 64px;
  --qg-topbar-h: 60px;
  --qg-sidebar-w: 250px;
  --qg-section-pad: 120px;

  /* ---- motion ---------------------------------------------------------- */
  --qg-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --qg-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --qg-dur-fast: 0.16s;
  --qg-dur: 0.22s;
  --qg-dur-slow: 0.4s;
}

/* ============================================================================
   DARK THEME
   Canvas is the spec's dark field (#06080d / #0d1117). Blue is lifted to
   --qg-blue-bright so links/buttons keep AA contrast on dark surfaces.
   ========================================================================== */
html[data-theme='dark'] {
  color-scheme: dark;

  --qg-ink: #f2f5fa;
  --qg-body: #c3ccda;
  --qg-muted: #8c97a8;
  --qg-faint: #6d7889;
  --qg-hairline: #1e2633;
  --qg-hairline-soft: #171e28;
  --qg-canvas: #0d1117;

  --qg-surface: #11161f;
  --qg-surface-2: #0d1117;
  --qg-surface-3: #1a212c;
  --qg-surface-sunken: #06080d;
  --qg-surface-tint: rgba(0, 102, 204, 0.12);
  --qg-surface-tint-line: rgba(0, 102, 204, 0.3);
  --qg-page: #06080d;

  --qg-text: var(--qg-ink);
  --qg-text-body: var(--qg-body);
  --qg-text-muted: var(--qg-muted);
  --qg-text-faint: var(--qg-faint);

  --qg-line: var(--qg-hairline);
  --qg-line-soft: var(--qg-hairline-soft);
  --qg-line-strong: #2b3542;

  --qg-wash: rgba(0, 102, 204, 0.14);
  --qg-wash-2: rgba(0, 102, 204, 0.1);

  --qg-accent: #4d94e8;
  --qg-accent-hover: #74aef0;
  --qg-accent-soft: rgba(77, 148, 232, 0.14);
  --qg-accent-line: rgba(77, 148, 232, 0.32);
  --qg-link: #74aef0;

  --qg-pos: #4ade80;
  --qg-neg: #f87171;
  --qg-pos-soft: rgba(74, 222, 128, 0.12);
  --qg-pos-line: rgba(74, 222, 128, 0.28);
  --qg-neg-soft: rgba(248, 113, 113, 0.12);
  --qg-neg-line: rgba(248, 113, 113, 0.28);

  --qg-gold-soft: rgba(255, 203, 5, 0.16);
  --qg-gold-line: rgba(255, 203, 5, 0.34);
  --qg-gold-text: #ffcb05;

  --qg-sh-hair: 0 1px 2px rgba(0, 0, 0, 0.5);
  --qg-sh-card: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px rgba(0, 0, 0, 0.42);
  --qg-sh-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.5);
  --qg-sh-float: 0 2px 4px rgba(0, 0, 0, 0.5), 0 28px 68px rgba(0, 0, 0, 0.55);
  --qg-sh-btn: 0 1px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --qg-sh-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12);

  --qg-focus: #74aef0;
}

/* Smaller type + tighter rhythm on narrow screens. */
@media (max-width: 1080px) {
  :root {
    --qg-fs-display: 52px;
    --qg-fs-h1: 36px;
    --qg-section-pad: 88px;
  }
}

@media (max-width: 620px) {
  :root {
    --qg-fs-display: 38px;
    --qg-fs-h1: 28px;
    --qg-fs-h2: 26px;
    --qg-gutter: 20px;
    --qg-section-pad: 72px;
    --qg-ls-display: -0.03em;
  }
}