/* ==========================================================================
   CPS Tester — Design Tokens (v2: charcoal UI + four vivid gradients)
   Single source of truth for color, spacing, radius, shadow and type scale.
   Every gradient is analogous *within itself* (purple→blue, orange→yellow,
   teal→lime, pink→orange) so the set feels cohesive even when four sit
   side by side.
   ========================================================================== */

:root{
  /* --- Brand (violet-blue) --- */
  --color-brand-50:#f4f2ff;
  --color-brand-100:#e8e4ff;
  --color-brand-200:#d3cbff;
  --color-brand-300:#b8abff;
  --color-brand-400:#9a86ff;
  --color-brand-500:#7c5cff;
  --color-brand-600:#6a43f0;
  --color-brand-700:#5732d4;
  --color-brand-800:#4527a8;
  --color-brand-900:#341d7d;
  --color-brand-500-rgb:124,92,255;

  --color-blue-500:#2f6bff;
  --color-blue-500-rgb:47,107,255;

  --color-pink-400:#f472b6;
  --color-pink-500:#ec4899;
  --color-pink-600:#db2777;
  --color-pink-500-rgb:236,72,153;

  --color-accent-400:#ffa04d;
  --color-accent-500:#ff7a1a;
  --color-accent-600:#e8620a;

  --color-success-400:#4ade80;
  --color-success-500:#22c55e;
  --color-success-600:#16a34a;

  --color-warning-400:#fbbf24;
  --color-warning-500:#f59e0b;

  --color-danger-500:#ef4444;

  /* --- Neutrals: warm charcoal, easy on the eyes for long sessions --- */
  --color-ink-950:#131316;
  --color-ink-900:#18181c;
  --color-ink-850:#1e1e23;
  --color-ink-800:#27272d;
  --color-ink-700:#31313a;
  --color-ink-600:#41414b;
  --color-ink-500:#5e5e6a;
  --color-ink-400:#8d8d99;
  --color-ink-300:#acacb7;
  --color-ink-200:#d0d0d8;
  --color-ink-100:#e7e7ec;
  --color-ink-50:#f6f6f8;
  --color-white:#ffffff;

  --surface-canvas:var(--color-ink-950);
  --surface-raised:var(--color-ink-850);
  --surface-card:var(--color-ink-800);
  --surface-card-hover:var(--color-ink-700);
  --surface-pad:#08080a;
  --surface-border:rgba(255,255,255,0.07);
  --surface-border-strong:rgba(255,255,255,0.15);

  --text-primary:var(--color-ink-50);
  --text-secondary:var(--color-ink-200);
  --text-muted:var(--color-ink-400);
  --text-on-accent:#1b1206;

  /* --- The four signature gradients --- */
  --grad-purple:linear-gradient(135deg,#6d28d9 0%,#2563eb 100%);
  --grad-orange:linear-gradient(135deg,#f97316 0%,#fbbf24 100%);
  --grad-green:linear-gradient(135deg,#0d9488 0%,#84cc16 100%);
  --grad-pink:linear-gradient(135deg,#e11d74 0%,#f97316 100%);

  /* Primary interactive gradient (buttons, scores, active states). */
  --brand-gradient:var(--grad-purple);
  --brand-gradient-soft:linear-gradient(135deg,rgba(var(--color-brand-500-rgb),0.18) 0%,rgba(var(--color-blue-500-rgb),0.14) 100%);

  /* --- Elevation --- */
  --shadow-sm:0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:0 8px 24px -10px rgba(0,0,0,0.6);
  --shadow-lg:0 18px 40px -18px rgba(0,0,0,0.7);
  --shadow-glow:0 0 0 1px rgba(var(--color-brand-500-rgb),0.4),0 10px 28px -8px rgba(var(--color-brand-500-rgb),0.45);

  /* --- Radius --- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:999px;

  /* --- Spacing scale --- */
  --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;

  /* --- Type: a bold condensed face for headings/labels (compact, sporty,
       scannable) over Inter for reading. --- */
  --font-heading:'Roboto Condensed','Arial Narrow',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --fs-xs:0.8125rem;
  --fs-sm:0.9375rem;
  --fs-base:1rem;
  --fs-lg:1.125rem;
  --fs-xl:clamp(1.2rem,1.1rem + 0.5vw,1.45rem);
  --fs-2xl:clamp(1.4rem,1.2rem + 0.9vw,1.9rem);
  --fs-3xl:clamp(1.6rem,1.3rem + 1.4vw,2.3rem);
  --fs-4xl:clamp(1.9rem,1.4rem + 2vw,2.9rem);
  --fs-5xl:clamp(2.2rem,1.5rem + 2.8vw,3.5rem);
  --fs-6xl:clamp(2.6rem,1.6rem + 3.6vw,4.2rem);
  --fs-display:clamp(1.9rem,1.3rem + 2.4vw,3rem);

  --lh-tight:1.15;
  --lh-snug:1.3;
  --lh-normal:1.7;

  /* --- Layout --- */
  --container-max:1240px;
  --container-wide:1440px;
  --header-height:64px;

  /* --- Motion --- */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --duration-fast:120ms;
  --duration-base:200ms;
  --duration-slow:360ms;

  --z-header:100;
  --z-mobile-menu:200;
  --z-modal:300;
  --z-toast:400;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
}