/*
 * Quantapix Design System — tokens
 *
 * Source: data/renders/evaluating-design/project/colors_and_type.css (regenerated
 * from Claude Design). Copy verbatim when re-syncing; normalize the header
 * per qagents/evaluating/CLAUDE.md §2 (the two-drift sweep).
 *
 * Fonts: Space Grotesk (display), Inter (body), JetBrains Mono (code).
 * Loaded from @fontsource in src/layouts/Layout.astro — do not @import from
 * Google Fonts here (self-host).
 */

:root {

  /* ─── BASE PALETTE ───────────────────────────────────────────── */

  /* Backgrounds */
  --bg-base:        #08090d;   /* near-black canvas */
  --bg-surface:     #10141d;   /* cards, panels */
  --bg-elevated:    #171d2b;   /* modals, dropdowns */
  --bg-subtle:      #1d2535;   /* hover states, sidebars */
  --bg-overlay:     rgba(8, 9, 13, 0.72); /* backdrop blur overlays */

  /* Borders */
  --border-dim:     #1e2738;
  --border-default: #2a3650;
  --border-strong:  #3d5070;

  /* Teal — primary brand / AI accent */
  --teal-50:  #e6fdf8;
  --teal-100: #b3f4e8;
  --teal-200: #66e8d0;
  --teal-300: #00d9b4;
  --teal-400: #00c9a7;   /* ← brand primary */
  --teal-500: #00af91;
  --teal-600: #008f76;
  --teal-700: #006b59;
  --teal-800: #004840;
  --teal-900: #002824;

  /* Amber — authority / legal accent */
  --amber-50:  #fef9ec;
  --amber-100: #fceec2;
  --amber-200: #f9d97a;
  --amber-300: #f5c040;
  --amber-400: #f5a623;   /* ← brand secondary */
  --amber-500: #e08c0c;
  --amber-600: #b56d08;
  --amber-700: #874f05;
  --amber-800: #5a3303;
  --amber-900: #2e1901;

  /* Blue-grey neutrals */
  --neutral-0:   #ffffff;
  --neutral-50:  #e8edf5;
  --neutral-100: #c8d3e3;
  --neutral-200: #9aafc8;
  --neutral-300: #7290ae;
  --neutral-400: #5a7a8a;
  --neutral-500: #425870;
  --neutral-600: #2e3f55;
  --neutral-700: #1d2d44;
  --neutral-800: #111d2e;
  --neutral-900: #07101e;

  /* Semantic status colors */
  --green-400:   #22c55e;
  --green-900:   #052e16;
  --red-400:     #f87171;
  --red-900:     #2d0a0a;
  --yellow-400:  #fbbf24;
  --yellow-900:  #2d1f00;
  --blue-400:    #60a5fa;
  --blue-900:    #0a1628;

  /* ─── SEMANTIC COLOR TOKENS ─────────────────────────────────── */

  --color-brand:          var(--teal-400);
  --color-brand-dim:      var(--teal-800);
  --color-brand-hover:    var(--teal-300);
  --color-accent:         var(--amber-400);
  --color-accent-dim:     var(--amber-800);
  --color-accent-hover:   var(--amber-300);

  --color-bg:             var(--bg-base);
  --color-surface:        var(--bg-surface);
  --color-elevated:       var(--bg-elevated);
  --color-subtle:         var(--bg-subtle);

  --color-border:         var(--border-default);
  --color-border-dim:     var(--border-dim);
  --color-border-strong:  var(--border-strong);

  --color-fg:             var(--neutral-50);     /* primary text */
  --color-fg2:            var(--neutral-200);    /* secondary text */
  --color-fg3:            var(--neutral-400);    /* tertiary / muted */
  --color-fg-inverse:     var(--bg-base);

  --color-success:        var(--green-400);
  --color-success-bg:     var(--green-900);
  --color-error:          var(--red-400);
  --color-error-bg:       var(--red-900);
  --color-warning:        var(--yellow-400);
  --color-warning-bg:     var(--yellow-900);
  --color-info:           var(--blue-400);
  --color-info-bg:        var(--blue-900);

  /* Agent / AI-specific tokens */
  --color-agent-pulse:    var(--teal-400);
  --color-confidence-hi:  var(--green-400);
  --color-confidence-mid: var(--amber-400);
  --color-confidence-lo:  var(--red-400);
  --color-stream:         var(--teal-200);   /* streaming text color */
  --color-cursor:         var(--teal-400);   /* blinking agent cursor */

  /* ─── TYPOGRAPHY TOKENS ─────────────────────────────────────── */

  /* Font stacks */
  --font-display:  'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:     'Inter', 'Space Grotesk', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Font sizes — fluid-friendly rem scale */
  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.8125rem;   /* 13px */
  --text-base: 0.9375rem;   /* 15px */
  --text-md:   1.0625rem;   /* 17px */
  --text-lg:   1.25rem;     /* 20px */
  --text-xl:   1.5rem;      /* 24px */
  --text-2xl:  2rem;        /* 32px */
  --text-3xl:  2.75rem;     /* 44px */
  --text-4xl:  3.75rem;     /* 60px */
  --text-5xl:  5rem;        /* 80px */

  /* Font weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:    1.15;
  --lh-snug:     1.35;
  --lh-normal:   1.55;
  --lh-relaxed:  1.75;
  --lh-loose:    2;

  /* Letter spacing */
  --ls-tight:    -0.03em;
  --ls-snug:     -0.01em;
  --ls-normal:    0;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-widest:    0.16em;

  /* ─── SEMANTIC TYPE ROLES ────────────────────────────────────── */

  /* H1 — page hero / product name */
  --h1-font:    var(--font-display);
  --h1-size:    var(--text-4xl);
  --h1-weight:  var(--fw-bold);
  --h1-lh:      var(--lh-tight);
  --h1-ls:      var(--ls-tight);

  /* H2 — section heading */
  --h2-font:    var(--font-display);
  --h2-size:    var(--text-2xl);
  --h2-weight:  var(--fw-semibold);
  --h2-lh:      var(--lh-snug);
  --h2-ls:      var(--ls-snug);

  /* H3 — subsection / card title */
  --h3-font:    var(--font-display);
  --h3-size:    var(--text-xl);
  --h3-weight:  var(--fw-semibold);
  --h3-lh:      var(--lh-snug);
  --h3-ls:      0;

  /* H4 — label heading */
  --h4-font:    var(--font-display);
  --h4-size:    var(--text-md);
  --h4-weight:  var(--fw-medium);
  --h4-lh:      var(--lh-normal);
  --h4-ls:      0;

  /* Body — default paragraph */
  --p-font:     var(--font-body);
  --p-size:     var(--text-base);
  --p-weight:   var(--fw-regular);
  --p-lh:       var(--lh-normal);
  --p-ls:       0;

  /* Caption / label */
  --caption-font:   var(--font-body);
  --caption-size:   var(--text-sm);
  --caption-weight: var(--fw-medium);
  --caption-lh:     var(--lh-normal);
  --caption-ls:     var(--ls-wide);

  /* Overline — e.g. "QUICK NARRATIVE ANALYZER" */
  --overline-font:   var(--font-mono);
  --overline-size:   var(--text-xs);
  --overline-weight: var(--fw-medium);
  --overline-ls:     var(--ls-widest);
  --overline-color:  var(--color-fg3);

  /* Code / legal excerpt */
  --code-font:   var(--font-mono);
  --code-size:   var(--text-sm);
  --code-weight: var(--fw-regular);
  --code-lh:     var(--lh-relaxed);
  --code-color:  var(--color-stream);
  --code-bg:     var(--bg-elevated);

  /* ─── SPACING SCALE ─────────────────────────────────────────── */

  --space-1:    0.25rem;   /* 4px */
  --space-2:    0.5rem;    /* 8px */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.25rem;   /* 20px */
  --space-6:    1.5rem;    /* 24px */
  --space-8:    2rem;      /* 32px */
  --space-10:   2.5rem;    /* 40px */
  --space-12:   3rem;      /* 48px */
  --space-16:   4rem;      /* 64px */
  --space-20:   5rem;      /* 80px */
  --space-24:   6rem;      /* 96px */

  /* ─── BORDER RADIUS ─────────────────────────────────────────── */

  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ─── SHADOWS ───────────────────────────────────────────────── */

  --shadow-sm:   0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:   0 12px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl:   0 24px 64px rgba(0,0,0,0.7);
  --shadow-glow-teal:  0 0 16px rgba(0, 201, 167, 0.25);
  --shadow-glow-amber: 0 0 16px rgba(245, 166, 35, 0.25);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,0.04);

  /* ─── TRANSITIONS ───────────────────────────────────────────── */

  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-quart:  cubic-bezier(0.5, 0, 0.75, 0);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:    cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:    120ms;
  --duration-normal:  220ms;
  --duration-slow:    380ms;
  --duration-enter:   260ms;
  --duration-exit:    180ms;

  --transition-base:  var(--duration-normal) var(--ease-smooth);

  /* ─── Z-INDEX SCALE ─────────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raise:    10;
  --z-sticky:   100;
  --z-overlay:  200;
  --z-modal:    300;
  --z-toast:    400;
  --z-cursor:   500;
}

/* ─── BASE RESETS ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── SEMANTIC TAG STYLES ─────────────────────────────────────── */

h1 {
  font-family: var(--h1-font);
  font-size: var(--h1-size);
  font-weight: var(--h1-weight);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h2 {
  font-family: var(--h2-font);
  font-size: var(--h2-size);
  font-weight: var(--h2-weight);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--color-fg);
}

h3 {
  font-family: var(--h3-font);
  font-size: var(--h3-size);
  font-weight: var(--h3-weight);
  line-height: var(--lh-snug);
  color: var(--color-fg);
}

h4, h5, h6 {
  font-family: var(--h4-font);
  font-size: var(--h4-size);
  font-weight: var(--h4-weight);
  line-height: var(--lh-normal);
  color: var(--color-fg);
}

p {
  font-family: var(--p-font);
  font-size: var(--p-size);
  font-weight: var(--p-weight);
  line-height: var(--lh-normal);
  color: var(--color-fg2);
}

code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--code-size);
  line-height: var(--lh-relaxed);
  color: var(--code-color);
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
}

a {
  color: var(--color-brand);
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--color-brand-hover); }

/* Overline utility */
.overline {
  font-family: var(--overline-font);
  font-size: var(--overline-size);
  font-weight: var(--overline-weight);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--overline-color);
}

/* Agent streaming cursor */
@keyframes agent-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.agent-cursor::after {
  content: '▋';
  color: var(--color-cursor);
  animation: agent-blink 1s step-end infinite;
  margin-left: 2px;
}

/* Agent pulse ring */
@keyframes agent-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

.agent-pulse {
  position: relative;
  display: inline-block;
}
.agent-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-agent-pulse);
  animation: agent-pulse 1.8s var(--ease-out-quart) infinite;
}