/* ==========================================================================
   QComply Design Tokens — CSS custom properties
   Generated from tokens/tokens.json. Import once at the app root.

   The three brand faces are self-hosted — import ../fonts/fonts.css alongside
   this file. (A commented-out Google Fonts @import used to live here, which
   meant nothing ever loaded Barlow and everything fell back to Arial Narrow.)
   ========================================================================== */

@import url('../fonts/fonts.css');

:root {
  /* ---- Ink (core navy) ---- */
  --qc-ink-950: #0E1720;
  --qc-ink-900: #131E29;
  --qc-ink-800: #1D2D3D;   /* canonical navy */
  --qc-ink-700: #2C455D;
  --qc-ink-600: #416180;
  --qc-ink-500: #597EA3;
  --qc-ink-400: #749DC4;
  --qc-ink-300: #94BCE3;
  --qc-ink-200: #B5D9FD;
  --qc-ink-100: #DCEBFB;

  /* ---- Paper (light neutrals) ---- */
  --qc-paper-000: #FFFFFF;
  --qc-paper-050: #FAFAFB;
  --qc-paper-100: #F2F2F3;  /* canonical paper */
  --qc-paper-200: #E7E9ED;
  --qc-paper-300: #E2E6EB;
  --qc-paper-400: #C9CED6;
  --qc-paper-500: #9AA3AF;

  /* ---- Brand blue ---- */
  --qc-blue-700: #0E43AE;
  --qc-blue-600: #1558D6;
  --qc-blue-500: #206FF7;  /* logo blue */
  --qc-blue-400: #4D8DF9;
  --qc-blue-300: #8FB8FC;
  --qc-blue-200: #C2D9FE;
  --qc-blue-100: #E4EDFE;

  /* ---- Semantic ---- */
  --qc-success: #1F7A5C;   --qc-success-bg: #E6F2EE;
  --qc-warning: #96620F;   --qc-warning-bg: #FBF1E2;
  --qc-danger:  #A83A32;   --qc-danger-bg:  #FAEAE9;
  --qc-info:    #206FF7;   --qc-info-bg:    #E4EDFE;

  /* ---- Data viz ramp (use in order) ---- */
  --qc-viz-1: #1D2D3D;
  --qc-viz-2: #2C455D;
  --qc-viz-3: #416180;
  --qc-viz-4: #597EA3;
  --qc-viz-5: #749DC4;
  --qc-viz-6: #94BCE3;
  --qc-viz-7: #B5D9FD;
  --qc-viz-8: #E7E9ED;
  --qc-viz-highlight: #206FF7;

  /* ---- Type families ---- */
  --qc-font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif;
  --qc-font-text: 'Barlow', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --qc-font-mono: 'IBM Plex Mono', SFMono-Regular, Menlo, monospace;

  /* ---- Type scale (screen) ---- */
  --qc-text-display-xl: 600 64px/1.02 var(--qc-font-display);
  --qc-text-display-lg: 600 48px/1.05 var(--qc-font-display);
  --qc-text-display-md: 600 36px/1.08 var(--qc-font-display);
  --qc-text-display-sm: 600 28px/1.15 var(--qc-font-display);
  --qc-text-title:      700 20px/1.30 var(--qc-font-text);
  --qc-text-body-lg:    400 18px/1.60 var(--qc-font-text);
  --qc-text-body:       400 16px/1.65 var(--qc-font-text);
  --qc-text-body-sm:    400 14px/1.60 var(--qc-font-text);
  --qc-text-caption:    400 12px/1.50 var(--qc-font-text);
  --qc-text-eyebrow:    600 11px/1.20 var(--qc-font-display);
  --qc-text-stat:       400 40px/1.00 var(--qc-font-display);
  --qc-tracking-eyebrow: 0.18em;
  --qc-tracking-tight: -0.01em;

  /* ---- Spacing (4px grid) ---- */
  --qc-space-1: 4px;   --qc-space-2: 8px;   --qc-space-3: 12px;
  --qc-space-4: 16px;  --qc-space-5: 20px;  --qc-space-6: 24px;
  --qc-space-8: 32px;  --qc-space-10: 40px; --qc-space-12: 48px;
  --qc-space-16: 64px; --qc-space-20: 80px; --qc-space-24: 96px;
  --qc-space-32: 128px;

  /* ---- Radius (squared brand) ---- */
  --qc-radius-none: 0px;
  --qc-radius-sm: 2px;
  --qc-radius-md: 4px;
  --qc-radius-full: 999px;

  /* ---- Borders ---- */
  --qc-border-hairline: 1px;
  --qc-border-rule: 2px;
  --qc-border-accent: 3px;

  /* ---- Shadow ---- */
  --qc-shadow-sm: 0 1px 2px rgba(29,45,61,.06);
  --qc-shadow-md: 0 4px 12px -2px rgba(29,45,61,.10);
  --qc-shadow-focus: 0 0 0 3px rgba(32,111,247,.35);

  /* ---- Layout ---- */
  --qc-content-max: 1200px;
  --qc-prose-max: 68ch;
  --qc-shell-max: 1440px;
  --qc-gutter: 24px;

  /* ---- Motion ---- */
  --qc-duration-fast: 120ms;
  --qc-duration-base: 200ms;
  --qc-duration-slow: 320ms;
  --qc-ease: cubic-bezier(.2,0,.2,1);
  --qc-ease-exit: cubic-bezier(.4,0,1,1);

  /* ==== SEMANTIC SURFACE ROLES — light theme (default) ==== */
  --qc-bg:            var(--qc-paper-100);
  --qc-bg-raised:     var(--qc-paper-000);
  --qc-bg-sunken:     var(--qc-paper-200);
  --qc-fg:            var(--qc-ink-800);
  --qc-fg-muted:      #5A6472;
  --qc-fg-subtle:     #646D79;
  --qc-fg-inverse:    var(--qc-paper-100);
  --qc-line:          var(--qc-paper-300);
  --qc-line-strong:   var(--qc-paper-400);
  --qc-accent:        var(--qc-blue-500);
  --qc-accent-hover:  var(--qc-blue-600);
  --qc-accent-fg:     #FFFFFF;
}

/* ==== Dark theme — the navy surface used on covers, footers, hero bands ==== */
[data-theme='dark'] {
  --qc-bg:            var(--qc-ink-800);
  --qc-bg-raised:     var(--qc-ink-700);
  --qc-bg-sunken:     var(--qc-ink-900);
  --qc-fg:            var(--qc-paper-100);
  --qc-fg-muted:      #A9B6C4;
  --qc-fg-subtle:     var(--qc-ink-400);
  --qc-fg-inverse:    var(--qc-ink-800);
  --qc-line:          rgba(242,242,243,.14);
  --qc-line-strong:   rgba(242,242,243,.28);
  --qc-accent:        var(--qc-ink-200);   /* on navy the accent is pale blue, NOT #206FF7 */
  --qc-accent-hover:  #D2E7FF;
  --qc-accent-fg:     var(--qc-ink-800);
}

/* ---- Base element defaults ---- */
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  background: var(--qc-bg);
  color: var(--qc-fg);
  font: var(--qc-text-body);
}
h1, h2, h3 { font-family: var(--qc-font-display); font-weight: 600; letter-spacing: var(--qc-tracking-tight); margin: 0; }
h1 { font: var(--qc-text-display-lg); }
h2 { font: var(--qc-text-display-md); }
h3 { font: var(--qc-text-display-sm); }
h4 { font: var(--qc-text-title); margin: 0; }
p  { max-width: var(--qc-prose-max); margin: 0 0 var(--qc-space-4); }
a  { color: var(--qc-accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--qc-accent-hover); }
code, kbd, samp { font-family: var(--qc-font-mono); font-size: .875em; }
:focus-visible { outline: none; box-shadow: var(--qc-shadow-focus); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}