/* =================================================================
   testrix.ai — design tokens
   Single source of truth for colors, type, spacing, radii, shadows.
   Import this file at the root of any HTML page in this system.
   ================================================================= */

/* ---------- Fonts: Geist + Geist Mono via Google Fonts ----------
   We're loading from Google Fonts CDN. If this skill is used offline,
   download the .woff2 files into ./fonts/ and rewrite the @font-face
   blocks. Geist is Vercel's official sans; Geist Mono is its mono
   companion. Both are Open Font License.
*/
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* =========================================================
     COLOR — neutrals (the "ink" stack, dark by default)
     ========================================================= */
  --ink-1000: #06080C;   /* deepest, only for very rare use */
  --ink-900:  #0B0D12;   /* page ground (default app/marketing dark bg) */
  --ink-800:  #11141B;   /* surface 1 — cards on ink-900 */
  --ink-700:  #1A1E27;   /* surface 2 — borders, hovered rows */
  --ink-600:  #262B36;   /* surface 3 — emphasis borders, dividers */
  --ink-500:  #3A4150;   /* mid grey — disabled icons, faint type */
  --ink-400:  #5C6373;   /* secondary text on dark, dimmed brand */
  --ink-300:  #8B92A1;   /* tertiary text on dark */
  --ink-200:  #B5BAC4;   /* secondary text on light bg */
  --ink-100:  #D8DBE2;   /* primary text on dark (slightly off white) */
  --ink-50:   #ECEEF2;   /* background on light surfaces */
  --ink-0:    #FFFFFF;

  /* =========================================================
     COLOR — accent (the testrix lime)
     One accent per screen. Lime is the agent's voice.
     ========================================================= */
  --lime-50:   #F4FCDC;
  --lime-100:  #E6F89B;
  --lime-200:  #DAF66A;
  --lime-300:  #CDF44C;
  --lime-400:  #C5F23B;  /* brand accent */
  --lime-500:  #B5E022;
  --lime-600:  #94B718;
  --lime-700:  #6F8810;
  --lime-glow: rgba(197, 242, 59, 0.18);

  /* =========================================================
     COLOR — semantic
     ========================================================= */
  --pass:        #2BD46B;   /* tests passing, healthy */
  --pass-bg:     rgba(43, 212, 107, 0.12);
  --fail:        #FF4D5E;   /* tests failing, errors */
  --fail-bg:     rgba(255, 77, 94, 0.12);
  --skip:        #F5B547;   /* skipped, warning */
  --skip-bg:     rgba(245, 181, 71, 0.12);
  --info:        #4DA8FF;   /* informational, links in body copy */
  --info-bg:     rgba(77, 168, 255, 0.12);
  --running:     var(--lime-400);  /* in-flight runs use the brand */

  /* =========================================================
     SEMANTIC (theme-aware) — dark mode is default
     Use these in components, not the raw scale, so light mode
     can swap them.
     ========================================================= */
  --bg:           var(--ink-900);
  --bg-elev-1:    var(--ink-800);
  --bg-elev-2:    var(--ink-700);
  --bg-overlay:   rgba(11, 13, 18, 0.72);

  --fg:           var(--ink-100);
  --fg-muted:     var(--ink-300);
  --fg-faint:     var(--ink-400);
  --fg-disabled:  var(--ink-500);
  --fg-on-accent: var(--ink-1000);

  --border:       var(--ink-700);
  --border-strong:var(--ink-600);
  --border-focus: var(--lime-400);

  --accent:       var(--lime-400);
  --accent-hover: var(--lime-300);
  --accent-pressed: var(--lime-500);

  /* =========================================================
     TYPOGRAPHY — families
     ========================================================= */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* =========================================================
     TYPOGRAPHY — scale (px values, also exposed as semantic)
     Display is heavy + tight. Body is regular. UI is medium.
     ========================================================= */
  --fs-display-xl: 88px;     --lh-display-xl: 0.95;
  --fs-display-lg: 64px;     --lh-display-lg: 1.0;
  --fs-display-md: 48px;     --lh-display-md: 1.05;
  --fs-display-sm: 36px;     --lh-display-sm: 1.1;
  --fs-h1: 32px;             --lh-h1: 1.15;
  --fs-h2: 24px;             --lh-h2: 1.25;
  --fs-h3: 20px;             --lh-h3: 1.3;
  --fs-h4: 17px;             --lh-h4: 1.35;
  --fs-body-lg: 17px;        --lh-body-lg: 1.55;
  --fs-body:    15px;        --lh-body:    1.55;
  --fs-body-sm: 13px;        --lh-body-sm: 1.5;
  --fs-label:   12px;        --lh-label:   1.4;
  --fs-mono-sm: 12px;        --lh-mono-sm: 1.4;
  --fs-mono:    13px;        --lh-mono:    1.45;

  --tracking-display: -0.025em;
  --tracking-h:       -0.015em;
  --tracking-body:     0em;
  --tracking-label:    0.06em;     /* uppercase labels */
  --tracking-mono-up:  0.04em;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* =========================================================
     SPACING — 4px base grid
     ========================================================= */
  --space-0:  0;
  --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-14: 56px;
  --space-20: 80px;
  --space-30: 120px;

  /* =========================================================
     RADII
     ========================================================= */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;     /* status chips ONLY */

  /* =========================================================
     SHADOWS — sparse. Light mode only by default.
     In dark mode, prefer surface-step elevation over shadow.
     ========================================================= */
  --shadow-sm:  0 1px 2px rgba(6, 8, 12, 0.06), 0 1px 1px rgba(6, 8, 12, 0.04);
  --shadow-md:  0 4px 12px rgba(6, 8, 12, 0.08), 0 1px 2px rgba(6, 8, 12, 0.06);
  --shadow-lg:  0 12px 32px rgba(6, 8, 12, 0.12), 0 2px 6px rgba(6, 8, 12, 0.08);
  --shadow-focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   240ms;

  /* =========================================================
     LAYOUT
     ========================================================= */
  --container-max:    1280px;
  --container-narrow: 960px;
  --nav-height:       56px;
  --sidebar-width:    240px;
  --sidebar-collapsed:64px;
}

/* =========================================================
   LIGHT MODE — opt-in via .light or media query.
   The lime stays the same; everything else inverts.
   ========================================================= */
.light,
[data-theme="light"] {
  --bg:           var(--ink-0);
  --bg-elev-1:    var(--ink-50);
  --bg-elev-2:    #FFFFFF;
  --bg-overlay:   rgba(11, 13, 18, 0.50);

  --fg:           var(--ink-1000);
  --fg-muted:     #4B5260;
  --fg-faint:     #6B7280;
  --fg-disabled:  #A8AEBA;
  --fg-on-accent: var(--ink-1000);

  --border:       #E2E5EB;
  --border-strong:#CACFD9;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   Apply via plain HTML tags so unstyled markup looks right.
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-h);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--weight-semibold); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--weight-medium); }

p { margin: 0; text-wrap: pretty; }

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

a {
  color: var(--info);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration: underline; text-underline-offset: 2px; }

::selection {
  background: var(--lime-400);
  color: var(--ink-1000);
}

/* =========================================================
   UTILITY CLASSES — the "semantic vars" the brief asks for
   ========================================================= */
.t-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.t-display-lg { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.t-display-md { font-size: var(--fs-display-md); line-height: var(--lh-display-md); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }
.t-display-sm { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-display); }

.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--weight-bold); letter-spacing: var(--tracking-h); }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-h); }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--weight-semibold); }
.t-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--weight-medium); }

.t-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.t-body    { font-size: var(--fs-body);    line-height: var(--lh-body); }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--fg-muted); }

.t-label {
  font-size: var(--fs-label); line-height: var(--lh-label);
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--fg-muted);
}

.t-mono     { font-family: var(--font-mono); font-size: var(--fs-mono); }
.t-mono-sm  { font-family: var(--font-mono); font-size: var(--fs-mono-sm); }
.t-mono-up  {
  font-family: var(--font-mono); font-size: var(--fs-mono-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-mono-up);
  font-weight: var(--weight-medium);
}

.t-muted   { color: var(--fg-muted); }
.t-faint   { color: var(--fg-faint); }
.t-accent  { color: var(--accent); }
.t-pass    { color: var(--pass); }
.t-fail    { color: var(--fail); }
.t-skip    { color: var(--skip); }

/* =========================================================
   FOCUS — sacred, never suppressed
   ========================================================= */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* =========================================================
   REDUCE MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* =========================================================
   SIGNATURE — matrix grid background (opt-in via class)
   ========================================================= */
.bg-matrix {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right,  var(--ink-700) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-700) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.bg-matrix-fade {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 50% 0%, transparent 0%, var(--bg) 70%),
    linear-gradient(to right,  var(--ink-700) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ink-700) 1px, transparent 1px);
  background-size: auto, 32px 32px, 32px 32px;
  background-position: 0 0, -1px -1px, -1px -1px;
}

/* =========================================================
   SIGNATURE — scan line (lime sweeping line for "agent thinking")
   Apply to a positioned ancestor; child .scan-line draws over it.
   ========================================================= */
.scan-line {
  position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--lime-400), transparent);
  opacity: 0.6;
  animation: scan 2.0s var(--ease-in-out) infinite;
  pointer-events: none;
}
@keyframes scan {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(var(--scan-distance, 240px)); opacity: 0; }
}

/* =========================================================
   STATUS PILL — used everywhere
   <span class="pill pill-pass">PASS</span>
   ========================================================= */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: var(--weight-medium); letter-spacing: var(--tracking-mono-up);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  background: transparent;
}
.pill-pass    { color: var(--pass); background: var(--pass-bg); border-color: transparent; }
.pill-fail    { color: var(--fail); background: var(--fail-bg); border-color: transparent; }
.pill-skip    { color: var(--skip); background: var(--skip-bg); border-color: transparent; }
.pill-running { color: var(--lime-400); background: var(--lime-glow); border-color: transparent; }
.pill-info    { color: var(--info); background: var(--info-bg); border-color: transparent; }
.pill-neutral { color: var(--fg-muted); background: var(--bg-elev-2); border-color: transparent; }

.pill-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}
.pill-running.pill-dot::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }