/* ═══════════════════════════════════════════════════════════════
   CompareAIHardware — Design Token Foundation (r1, 2026-08-25)
   THE single source of truth for color, type, space, radius,
   elevation, motion. Loaded site-wide via partials/tokens.blade.php.
   Legacy aliases at the bottom keep existing stylesheets working;
   new code must use the --c-*/--t-*/--sp-*/--r-*/--e-*/--m-* tokens.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ---- Brand: "Plasma" — electric cyan core, violet plasma edge ---- */
  /* Signature hue: cyan #22d3ee family (NOT Tailwind indigo). */
  --c-accent:        #22d3ee;  /* primary brand accent */
  --c-accent-strong: #67e8f9;  /* hover / emphasis */
  --c-accent-deep:   #0e7490;  /* pressed / deep tint */
  --c-plasma:        #a78bfa;  /* secondary accent — use sparingly */
  --c-accent-soft:   rgba(34,211,238,.10);
  --c-accent-softer: rgba(34,211,238,.06);
  --c-plasma-soft:   rgba(167,139,250,.12);

  /* ---- Surface ladder (real separation) ---- */
  --c-bg:        #05080f;   /* page base — deep blue-black */
  --c-surface:   #0b1220;   /* elevated surface (cards) */
  --c-surface-2: #111a2e;   /* high surface (nested, hover) */
  --c-surface-3: #18243d;   /* highest surface (active states) */
  --c-border:    #1b2942;
  --c-border-strong:#2a3a5c;

  /* ---- Text ---- */
  --c-text:      #e8edf6;
  --c-dim:       #93a1b8;
  --c-dimmer:    #5c6b84;

  /* ---- Status (kept semantic) ---- */
  --c-green:     #4ade80;  --c-green-soft:  rgba(74,222,128,.13);
  --c-yellow:    #fbbf24;  --c-yellow-soft: rgba(251,191,36,.13);
  --c-red:       #f87171;  --c-red-soft:    rgba(248,113,113,.13);

  /* ---- Type scale (fluid where useful) ---- */
  --font-body: 'Inter',system-ui,-apple-system,sans-serif;
  --font-display:'Space Grotesk','Inter',system-ui,sans-serif;
  --t-xs:  .75rem;
  --t-sm:  .875rem;
  --t-md:  1rem;
  --t-lg:  1.125rem;
  --t-xl:  clamp(1.35rem,1.2rem + .8vw,1.75rem);
  --t-2xl: clamp(1.6rem,1.3rem + 1.5vw,2.25rem);
  --t-hero:clamp(2.3rem,1.6rem + 3.4vw,4rem);
  --tracking-display:-.03em;
  --tracking-caps:.08em;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- Radius scale ---- */
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-full: 999px;

  /* ---- Elevation: layered shadow + accent glow ---- */
  --e-1: 0 1px 2px rgba(2,6,17,.5), 0 2px 8px rgba(2,6,17,.35);
  --e-2: 0 2px 6px rgba(2,6,17,.55), 0 8px 24px rgba(2,6,17,.45);
  --e-3: 0 4px 12px rgba(2,6,17,.6), 0 16px 48px rgba(2,6,17,.55);
  --glow-accent: 0 0 24px rgba(34,211,238,.18), 0 0 64px rgba(34,211,238,.07);
  --glow-text:   0 0 22px rgba(34,211,238,.45);

  /* ---- Motion tokens ---- */
  --m-fast: 120ms;
  --m-base: 180ms;
  --m-slow: 320ms;
  --m-ease: cubic-bezier(.33,1,.68,1);       /* easeOutCubic */
  --m-ease-in-out: cubic-bezier(.65,0,.35,1);
  --m-ease-spring: cubic-bezier(.34,1.4,.64,1);

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 2px var(--c-bg), 0 0 0 4px var(--c-accent);

  /* ---- Layout ---- */
  --container-max: 1200px;
}

/* Global reduced-motion override — every animation/transition dies. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   LEGACY ALIASES — old token names map onto the new system so
   app.css / nav.css / homepage.css and all article pages keep
   rendering without edits. Do not use these names in NEW code.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg: var(--c-bg);
  --surface: var(--c-surface);
  --surface2: var(--c-surface-2);
  --surface3: var(--c-surface-3);
  --border: var(--c-border);
  --border-hover: var(--c-border-strong);
  --text: var(--c-text);
  --dim: var(--c-dim);
  --dimmer: var(--c-dimmer);
  --accent: var(--c-accent);
  --accent-hover: var(--c-accent-strong);
  --accent-soft: var(--c-accent-soft);
  --green: var(--c-green);
  --green-soft: var(--c-green-soft);
  --yellow: var(--c-yellow);
  --yellow-soft: var(--c-yellow-soft);
  --red: var(--c-red);
  --red-soft: var(--c-red-soft);
  --radius: var(--r-md);
  --radius-sm: var(--r-sm);
  --radius-xs: var(--r-xs);
  --transition: var(--m-base) var(--m-ease);
}