/* CoreQuant Advisors — bundled stylesheet (colors + typography + spacing + base + shared page rules)
   Self-hosted fonts: fonts/*.woff2 (variable-weight files, no external CDN). */

/* ============ FONTS (self-hosted) ============ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}

/* ============ TYPE TOKENS ============ */
:root {
  --font-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-display-2xl: 700 76px/1.04 var(--font-display);
  --text-display-xl: 700 56px/1.08 var(--font-display);
  --text-display-lg: 600 40px/1.12 var(--font-display);
  --text-display-md: 600 32px/1.18 var(--font-display);
  --text-display-sm: 600 24px/1.25 var(--font-display);

  --text-body-lg: 400 19px/1.6 var(--font-body);
  --text-body-md: 400 16px/1.6 var(--font-body);
  --text-body-sm: 400 14px/1.55 var(--font-body);
  --text-body-xs: 400 12.5px/1.5 var(--font-body);

  --text-label-md: 600 13px/1.2 var(--font-body);
  --text-label-sm: 600 11.5px/1.2 var(--font-body);

  --text-mono-md: 400 14px/1.6 var(--font-mono);
  --text-mono-sm: 400 12.5px/1.5 var(--font-mono);

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.08em;
}

/* ============ COLOR TOKENS ============ */
:root {
  --cq-bg-950: #08090b;
  --cq-bg-900: #101216;
  --cq-bg-850: #141619;
  --cq-border-800: #23262b;
  --cq-text-100: #f2f2f2;
  --cq-text-muted-400: #90939a;

  --cq-blue-500: #4f9cf9;
  --cq-blue-400: #74b1fa;
  --cq-blue-600: #3d84e0;
  --cq-blue-700: #2e68b3;

  --cq-purple-500: #7b6cf6;
  --cq-purple-400: #9a8ef8;
  --cq-purple-600: #6353e0;

  --cq-green-500: #3ecf8e;
  --cq-green-600: #2fae76;
  --cq-green-100: #e4f8ef;
  --cq-green-800: #0e3d29;

  --cq-red-500: #f2555a;
  --cq-red-600: #d93d42;
  --cq-red-100: #fce7e7;
  --cq-red-800: #4a1416;

  --cq-amber-500: #f5a623;
  --cq-amber-100: #fdf1dc;
  --cq-amber-800: #4a3208;

  --cq-white: #ffffff;
  --cq-light-bg-0: #ffffff;
  --cq-light-bg-50: #f6f7f9;
  --cq-light-bg-100: #eef0f3;
  --cq-light-border-200: #e2e4e9;
  --cq-light-text-900: #14161a;
  --cq-light-text-muted-500: #5b5f6a;
}

:root,
[data-cq-theme="dark"] {
  color-scheme: dark;

  --surface-app: var(--cq-bg-950);
  --surface-alt: var(--cq-bg-900);
  --surface-card: var(--cq-bg-850);
  --surface-card-hover: #1a1d21;
  --surface-overlay: rgba(8, 9, 11, 0.72);
  --surface-input: var(--cq-bg-900);

  --border-default: var(--cq-border-800);
  --border-strong: #33373d;
  --border-focus: var(--cq-blue-500);

  --text-primary: var(--cq-text-100);
  --text-secondary: var(--cq-text-muted-400);
  --text-disabled: #55585f;
  --text-on-accent: #05080f;
  --text-link: var(--cq-blue-400);
  --text-link-hover: var(--cq-blue-500);

  --accent-primary: var(--cq-blue-500);
  --accent-primary-hover: var(--cq-blue-400);
  --accent-primary-active: var(--cq-blue-600);
  --accent-secondary: var(--cq-purple-500);
  --accent-secondary-hover: var(--cq-purple-400);

  --success-fg: var(--cq-green-500);
  --success-bg: rgba(62, 207, 142, 0.12);
  --success-border: rgba(62, 207, 142, 0.32);
  --error-fg: var(--cq-red-500);
  --error-bg: rgba(242, 85, 90, 0.12);
  --error-border: rgba(242, 85, 90, 0.32);
  --warning-fg: var(--cq-amber-500);
  --warning-bg: rgba(245, 166, 35, 0.12);
  --warning-border: rgba(245, 166, 35, 0.32);

  --focus-ring: 0 0 0 3px rgba(79, 156, 249, 0.35);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow-blue: 0 0 32px rgba(79, 156, 249, 0.25);
}

[data-cq-theme="light"] {
  color-scheme: light;

  --surface-app: var(--cq-light-bg-0);
  --surface-alt: var(--cq-light-bg-50);
  --surface-card: var(--cq-white);
  --surface-card-hover: var(--cq-light-bg-50);
  --surface-overlay: rgba(20, 22, 26, 0.5);
  --surface-input: var(--cq-white);

  --border-default: var(--cq-light-border-200);
  --border-strong: #cbced6;
  --border-focus: var(--cq-blue-600);

  --text-primary: var(--cq-light-text-900);
  --text-secondary: var(--cq-light-text-muted-500);
  --text-disabled: #a4a8b1;
  --text-on-accent: #ffffff;
  --text-link: var(--cq-blue-600);
  --text-link-hover: var(--cq-blue-700);

  --accent-primary: var(--cq-blue-600);
  --accent-primary-hover: var(--cq-blue-700);
  --accent-primary-active: #24568f;
  --accent-secondary: var(--cq-purple-600);
  --accent-secondary-hover: #5344d6;

  --success-fg: #1a8a5a;
  --success-bg: var(--cq-green-100);
  --success-border: #b7ecd3;
  --error-fg: #c22127;
  --error-bg: var(--cq-red-100);
  --error-border: #f6c6c7;
  --warning-fg: #9a6100;
  --warning-bg: var(--cq-amber-100);
  --warning-border: #f4dca9;

  --focus-ring: 0 0 0 3px rgba(61, 132, 224, 0.28);

  --shadow-sm: 0 1px 2px rgba(20, 22, 26, 0.06);
  --shadow-md: 0 4px 16px rgba(20, 22, 26, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 22, 26, 0.12);
  --shadow-glow-blue: 0 0 32px rgba(79, 156, 249, 0.15);
}

/* ============ SPACING / RADIUS / MOTION TOKENS ============ */
:root {
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --border-w-hairline: 1px;
  --border-w-thick: 1.5px;

  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 320ms;

  --content-max-width: 1180px;
  --content-max-width-narrow: 760px;
}

/* ============ BASE RESETS ============ */
body[data-cq-root] {
  background: var(--surface-app);
  color: var(--text-primary);
  font: var(--text-body-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-cq-root] * { box-sizing: border-box; }
[data-cq-root] a { color: var(--text-link); text-decoration: none; }
[data-cq-root] a:hover { color: var(--text-link-hover); text-decoration: underline; }
[data-cq-root] ::selection { background: rgba(79, 156, 249, 0.35); color: var(--text-primary); }
[data-cq-root] :focus-visible { outline: none; box-shadow: var(--focus-ring); }
[data-cq-root] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-cq-root] ::-webkit-scrollbar-track { background: transparent; }
[data-cq-root] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }

/* ============ SHARED PAGE RULES (was inline <style> on every page) ============ */
body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; line-height: 1.6; }
a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
*{ box-sizing: border-box; }

.case-wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

.cq-area, .cq-path, .cq-case { transition: border-color .18s cubic-bezier(.2,.7,.3,1), transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s cubic-bezier(.2,.7,.3,1); }
.cq-area:hover, .cq-path:hover, .cq-case:hover { border-color: rgba(79,156,249,0.55); transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(79,156,249,0.22), 0 12px 32px rgba(79,156,249,0.10); }
nav a { transition: color .15s cubic-bezier(.2,.7,.3,1); }
.cq-cta { transition: transform .12s cubic-bezier(.2,.7,.3,1), background .15s, box-shadow .15s; }
.cq-cta:hover { box-shadow: 0 8px 22px rgba(79,156,249,0.24); }
.cq-cta:active { transform: scale(0.98); }
button[type=submit] { transition: transform .12s cubic-bezier(.2,.7,.3,1), background .15s; }
button[type=submit]:active { transform: scale(0.98); }

@media (prefers-reduced-motion: no-preference) {
  @keyframes cqDrift1 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(70px,50px) scale(1.14);} 100%{transform:translate(0,0) scale(1);} }
  @keyframes cqDrift2 { 0%{transform:translate(0,0) scale(1);} 50%{transform:translate(-60px,-36px) scale(1.12);} 100%{transform:translate(0,0) scale(1);} }
  .cq-glow>div:first-child { animation: cqDrift1 20s ease-in-out infinite; }
  .cq-glow>div:last-child { animation: cqDrift2 24s ease-in-out infinite; }
}

@media (max-width: 760px) {
  .cq-hide-sm { display: none !important; }
  .cq-links { display: none !important; }
  .cq-hero-h1 { font-size: 34px !important; }
  .case-h1 { font-size: 30px !important; }
  .cq-grid-2 { grid-template-columns: 1fr !important; }
  .cq-grid-3 { grid-template-columns: 1fr !important; }
  .cq-proof { grid-template-columns: 1fr 1fr !important; }
}