/* ============================================================
   PhyCircuitBoard — Design Tokens v2.0
   Drop into WordPress child theme: /assets/css/tokens.css
   Or import from theme.json color/typography presets.
   ============================================================ */

:root {
  /* ------- color (dark mode default) ------- */
  --bg-0: #0A0E1A;
  --bg-1: #11172A;
  --bg-2: #1A2240;
  --bg-3: #232C50;

  --fg-0: #F5F7FF;
  --fg-1: #C0CADF;
  --fg-2: #8492AC;
  --fg-3: #7682A0; /* WCAG AA: 5.02:1 on bg-0, 4.64:1 on bg-1 (was #5A6584 = 3.33:1, failed AA) */

  --accent: #FF6A2C;
  --accent-hover: #FF8550;
  --accent-2: #22D3EE;
  --accent-2-hover: #67E8F9;
  --copper: #E8A86B;
  --trace: #5BE49B;

  --good: #34D399;
  --warn: #FBBF24;
  --bad:  #F87171;
  --info: #60A5FA;

  --border-0: #1E2640;
  --border-1: #2C365A;
  --ring: var(--accent);

  --grad-thermal: linear-gradient(135deg, #1E3A8A 0%, #6D28D9 35%, #E11D48 70%, #F97316 100%);
  --grad-trace:   linear-gradient(90deg, #22D3EE 0%, #5BE49B 100%);

  /* ------- typography ------- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Berkeley Mono', ui-monospace, monospace;

  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-44: 2.75rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.55;

  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.06em;

  /* ------- spacing (8 px base) ------- */
  --space-0: 0;
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* ------- radii ------- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-full: 9999px;

  /* ------- shadows ------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,.4);
  --shadow-3: 0 12px 48px rgba(0,0,0,.5);
  --shadow-glow: 0 0 24px rgba(255,106,44,.35);

  /* ------- motion ------- */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;

  /* ------- layout ------- */
  --container-narrow: 720px;
  --container-base:   1100px;
  --container-wide:   1320px;
  --gutter: clamp(1rem, 3vw, 2rem);
}

/* Light mode override (when user prefers, or .light class on root) */
@media (prefers-color-scheme: light) {
  :root:not(.dark) {
    --bg-0: #FAFBFD;
    --bg-1: #F1F4F9;
    --bg-2: #E5E9F2;
    --bg-3: #D8DEEC;

    --fg-0: #0A0E1A;
    --fg-1: #2B3654;
    --fg-2: #5A6584;
    --fg-3: #646E8A; /* WCAG AA: 4.90:1 on light bg-0 (was #8492AC = 3.03:1, failed AA) */

    --border-0: #D8DEEC;
    --border-1: #C0CADF;

    --shadow-1: 0 1px 2px rgba(0,14,40,.06);
    --shadow-2: 0 4px 16px rgba(0,14,40,.08);
    --shadow-3: 0 12px 48px rgba(0,14,40,.10);
  }
}

/* Force-dark class (override) */
.dark, :root.dark {
  /* tokens already set above; this exists for explicit override */
}

/* ------- base type ------- */
html, body {
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-body);
  font-size: var(--fs-18);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  color: var(--fg-0);
}

h1 { font-size: clamp(var(--fs-44), 5vw, var(--fs-72)); line-height: var(--lh-tight); }
h2 { font-size: clamp(var(--fs-28), 3.5vw, var(--fs-44)); }
h3 { font-size: clamp(var(--fs-24), 2.5vw, var(--fs-28)); }
h4 { font-size: var(--fs-20); font-family: var(--font-body); font-weight: 600; }

code, pre, kbd, samp, .mono { font-family: var(--font-mono); font-size: 0.95em; }

a {
  color: var(--accent-2);
  text-decoration-color: color-mix(in oklch, var(--accent-2) 40%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--accent-2-hover); }

::selection { background: var(--accent); color: var(--bg-0); }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* ------- utility container ------- */
.container        { max-width: var(--container-base); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide  { max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--gutter); }

/* ------- button primitives ------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.75rem 1.25rem;
  border-radius: var(--r-2);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-16);
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--bg-0);
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--ghost {
  background: transparent;
  color: var(--fg-0);
  border-color: var(--border-1);
}
.btn--ghost:hover { background: var(--bg-1); }

.btn--link {
  background: transparent;
  color: var(--accent-2);
  padding-inline: 0;
}
.btn--link:hover { color: var(--accent-2-hover); }

/* ------- chips, badges, labels ------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.25rem 0.625rem;
  border-radius: var(--r-full);
  background: var(--bg-2);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  border: 1px solid var(--border-1);
}

/* ------- cards ------- */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border-0);
  border-radius: var(--r-3);
  padding: var(--space-6);
  transition: border-color var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.card:hover { border-color: var(--border-1); transform: translateY(-2px); }

/* ------- mono data table ------- */
table.data {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-family: var(--font-mono); font-size: var(--fs-14);
}
table.data th, table.data td {
  text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-0);
}
table.data th { color: var(--fg-2); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); font-size: var(--fs-12); }

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