/**
 * Tango Brand — CSS Design Tokens
 * Voltage green on coal. Kinetic, scannable, irresistible to tap.
 * One palette for the whole brandspace — every Tango product (TangoQR,
 * TangoPDF, TangoInvite, TangoForms…) ships these exact colors.
 * Light-first; ships with proper dark-mode aliases.
 * Import once at the root of your app.
 */

:root {
  /* ─── Primary — Voltage Green ────────────────────────────────────── */
  --color-voltage-pale:   #F0FDF4;
  --color-voltage-light:  #86EFAC;
  --color-voltage:        #22C55E;
  --color-voltage-dark:   #16A34A;
  --color-voltage-deep:   #15803D;
  --color-voltage-black:  #052E16;

  /* ─── Anchor — Coal (near-black) ─────────────────────────────────── */
  --color-coal:           #111111;
  --color-coal-deep:      #0A0A0A;

  /* ─── Neutrals — warm-ish, voltage-friendly ──────────────────────── */
  --color-ink:            #0A0A0A;
  --color-midnight:       #18181B;
  --color-slate:          #27272A;
  --color-storm:          #3F3F46;
  --color-muted:          #71717A;
  --color-muted-light:    #A1A1AA;
  --color-border:         #E4E4E7;
  --color-cloud:          #FAFAFA;
  --color-white:          #FFFFFF;

  /* ─── RGB channels (for rgba shadows/overlays) ───────────────────── */
  --color-voltage-rgb:    34, 197, 94;
  --color-coal-rgb:       17, 17, 17;

  /* ─── Main Accent — Plasma ───────────────────────────────────────── */
  /* The brand's one true accent. Pairs with voltage like complementary
     poles on a circuit — high contrast, electric. Use for non-CTA pops:
     secondary buttons, category headers, illustration highlights, the
     "premium" or "active" badge. Never replaces voltage on a primary CTA. */
  --color-plasma-pale:    #F3E8FF;
  --color-plasma-light:   #C4B5FD;
  --color-plasma:         #7C3AED;
  --color-plasma-dark:    #6D28D9;
  --color-plasma-deep:    #4C1D95;
  --color-plasma-rgb:     124, 58, 237;

  /* ─── Semantic (status — functional only, not decorative) ────────── */
  --color-pass:           #22C55E;   /* uses voltage — brand and "go" align */
  --color-warn:           #F59E0B;   /* amber */
  --color-fail:           #F43F5E;   /* rose — distinct from any Tesla read */
  --color-info:           #0EA5E9;   /* sky */

  /* ─── Typography ─────────────────────────────────────────────────── */
  --font-display:         'Unbounded', sans-serif;
  --font-sans:            'Plus Jakarta Sans', sans-serif;
  --font-mono:            'JetBrains Mono', monospace;

  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;

  /* ─── Font Sizes ─────────────────────────────────────────────────── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  34px;
  --text-4xl:  46px;

  /* ─── Letter Spacing — Unbounded reads better slightly opened up ── */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.10em;

  /* ─── Border Radius — round, like the mark's link geometry ──────── */
  --radius-sm:    8px;
  --radius:      12px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ─── Shadows — soft, voltage-tinted on hover ───────────────────── */
  --shadow-sm:          0 1px 3px rgba(10,10,10,0.08);
  --shadow:             0 2px 8px rgba(10,10,10,0.10);
  --shadow-md:          0 4px 16px rgba(10,10,10,0.12);
  --shadow-lg:          0 8px 32px rgba(10,10,10,0.18);
  --shadow-voltage:     0 4px 24px rgba(var(--color-voltage-rgb),0.32);
  --shadow-voltage-lg:  0 10px 40px rgba(var(--color-voltage-rgb),0.48);
  --shadow-plasma:      0 4px 24px rgba(var(--color-plasma-rgb),0.32);

  /* ─── Transitions ────────────────────────────────────────────────── */
  --transition-fast: 100ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ─── Semantic Aliases (light mode — default) ───────────────────── */
  --bg-primary:        var(--color-white);
  --bg-secondary:      var(--color-cloud);
  --bg-surface:        var(--color-white);
  --text-primary:      var(--color-coal);
  --text-secondary:    var(--color-muted);
  --text-accent:       var(--color-voltage-dark);
  --border-default:    var(--color-border);
  --interactive:       var(--color-voltage);
  --interactive-hover: var(--color-voltage-dark);
}

/* ─── Dark Mode Overrides ──────────────────────────────────────────── */
.dark, [data-theme="dark"] {
  --bg-primary:        var(--color-coal-deep);
  --bg-secondary:      var(--color-coal);
  --bg-surface:        var(--color-slate);
  --text-primary:      var(--color-cloud);
  --text-secondary:    var(--color-muted-light);
  --text-accent:       var(--color-voltage-light);
  --border-default:    var(--color-storm);
  --interactive:       var(--color-voltage);
  --interactive-hover: var(--color-voltage-light);
}

/* ─── Base Resets ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Utility Classes ──────────────────────────────────────────────── */
.font-display { font-family: var(--font-display); font-weight: var(--font-weight-bold); letter-spacing: var(--tracking-snug); }
.font-ui      { font-family: var(--font-sans); }
.font-data    { font-family: var(--font-mono); }

.text-accent  { color: var(--text-accent); }
.text-muted   { color: var(--text-secondary); }

.status-pass  { color: var(--color-pass); }
.status-warn  { color: var(--color-warn); }
.status-fail  { color: var(--color-fail); }
.status-info  { color: var(--color-info); }

/* ─── Primary CTA ──────────────────────────────────────────────────── */
/* Inset/letterpress on primary CTAs: a faint white highlight below the
   glyphs sharpens coal text against saturated voltage green, which otherwise
   shimmers at the edges. Scoped to button/link CTAs so it never touches
   incidental voltage surfaces (status dots, sparkline bars, toggles). */
button.bg-voltage,
a.bg-voltage {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}