/* ══════════════════════════════════════════════════════════════════════
IPTV Americans — Design Tokens (v1.0)
──────────────────────────────────────────────────────────────────────
Canonical CSS custom properties for the entire site.
Load order: This file MUST load AFTER site.css so its :root cascades
over the legacy :root declarations at line 10 and line 2434 of
site.css. Recommended order:
← this file
← optional
Source of truth: Forensic audit of 4 reference pages —
/ · /iptv-streaming-service · /iptv-for-sports · /best-iptv-service
See: design-system/00-audit-report.md
══════════════════════════════════════════════════════════════════════ */
:root {
/* ─── Surfaces (dark page chrome) ──────────────────────────────────── */
--color-bg-deep: #050816; /* html, deepest body, behind everything */
--color-bg: #0a0e1f; /* default page body background */
--color-bg-elev: #1A2332; /* elevated cards on dark (subtle lift) */
--color-bg-alt: #111827; /* alternating-section background */
/* ─── Surfaces (light content cards — the .surface-light pattern) ── */
--color-surface-light: #ffffff; /* white card surface for prose / pricing / forms */
--color-surface-soft: #f8fafc; /* off-white for nested cards on white parents */
/* ─── Text on dark surface ────────────────────────────────────────── */
--color-fg: #ffffff; /* headings, primary text on dark */
--color-fg-soft: #e2e8f0; /* body text on dark */
--color-muted: #94a3b8; /* secondary / meta text on dark */
--color-muted-soft: #cbd5e1; /* tertiary text on dark */
/* ─── Text on light surface (.surface-light) ──────────────────────── */
--color-fg-on-light: #0f172a; /* primary text on white */
--color-fg-on-light-soft: #1e293b; /* body text on white */
--color-muted-on-light: #475569; /* secondary text on white */
/* ─── Brand: indigo / purple (the actual rendered palette) ────────── */
--color-primary: #818cf8; /* indigo-400 — primary brand */
--color-primary-2: #6366f1; /* indigo-500 — hover/active */
--color-primary-bright: #a5b4fc; /* indigo-300 — gradient stop */
--color-accent: #c084fc; /* purple-400 — accent (CTAs, links, badges) */
--color-accent-soft: #c4b5fd; /* violet-300 — soft purple text */
/* Header amber accent — the ONE place line-10 amber survives live */
--color-amber: #f59e0b;
--color-amber-fg: #78350f;
/* Light-brand fallback (for .surface-light components only) */
--color-navy: #1e3a5f; /* navy heading colour on white */
--color-navy-2: #2d4a6f; /* navy hover */
/* ─── Lines / dividers ────────────────────────────────────────────── */
--color-line: rgba(255,255,255,0.08); /* card dividers on dark */
--color-line-bright: rgba(168,85,247,0.30); /* hover/focus borders on dark */
--color-line-on-light: #e2e8f0; /* slate borders on white surfaces */
/* ─── Semantic ────────────────────────────────────────────────────── */
--color-good: #6ee7b7; /* success text on dark */
--color-good-bg: rgba(34,197,94,0.06); /* success card background */
--color-good-strong: #22c55e; /* success borders/icons */
--color-good-on-light: #065f46; /* success text on .surface-light */
--color-good-bg-light: #f0fdf4; /* success card bg on .surface-light */
--color-warn: #fbbf24;
--color-warn-bg: rgba(168,85,247,0.06);
--color-err: #fda4af; /* error text on dark */
--color-err-bright: #ff6b6b; /* error icons/borders */
--color-err-on-light: #991b1b; /* error text on .surface-light */
--color-err-bg-light: #fef2f2; /* error card bg on .surface-light */
--color-info: #22d3ee; /* cyan info */
--color-cite: rgba(99,102,241,0.06); /* citation/quote bg */
--color-cite-fg: #a5b4fc;
/* ─── Spacing scale (9 linear steps) ──────────────────────────────── */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 48px;
--space-9: 64px;
/* ─── Radii ────────────────────────────────────────────────────────── */
--radius: 8px; /* buttons, inputs, badges */
--radius-md: 10px; /* small cards (stat / pill cards) */
--radius-lg: 12px; /* content cards (.plan-card, .reason-card etc.) */
--radius-xl: 18px; /* feature / region cluster headers */
--radius-pill: 999px; /* pills, badges, trust-row chips */
/* ─── Shadow / elevation ──────────────────────────────────────────── */
--shadow-card: 0 4px 24px rgba(15,23,42,.06);
--shadow-card-hover: 0 12px 32px rgba(30,58,95,.18);
--shadow-cta: 0 8px 24px rgba(168,85,247,.20); /* purple-tinted glow on dark CTA */
--shadow-overlay: 0 4px 30px rgba(0,0,0,.45); /* modal / lightbox */
--shadow-sheet: 0 4px 30px rgba(0,0,0,.18); /* .surface-light reading sheet */
/* ─── Typography ──────────────────────────────────────────────────── */
--font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-mono: Menlo, Consolas, "Courier New", monospace;
/* Type ramp (use clamp() on largest sizes for fluid scaling) */
--fs-xs: 0.78rem; /* eyebrows, captions */
--fs-sm: 0.86rem; /* small body, meta lines */
--fs-base: 1rem; /* default body */
--fs-lg: 1.05rem; /* card heading h3 */
--fs-xl: 1.25rem; /* sub-section heading */
--fs-2xl: 1.55rem; /* article h2 */
--fs-3xl: 1.7rem; /* section heading h2 */
--fs-4xl: clamp(1.8rem, 4vw, 3rem); /* hero h1 */
/* Line heights */
--lh-tight: 1.2;
--lh-snug: 1.4;
--lh-normal: 1.6;
--lh-loose: 1.7;
/* Letter spacing */
--ls-tight: -0.01em;
--ls-normal: 0;
--ls-wide: 0.04em;
--ls-wider: 0.06em; /* eyebrows / uppercase labels */
/* ─── Layout / containers ─────────────────────────────────────────── */
--w-content: 720px; /* prose / article max width (reading column) */
--w-wide: 1100px; /* grid / section max width */
--w-mobile-padding: 20px; /* side padding on mobile */
/* ─── Transitions ─────────────────────────────────────────────────── */
--transition-fast: 150ms ease;
--transition-base: 200ms ease;
--transition-slow: 350ms ease;
/* ─── Z-index scale ───────────────────────────────────────────────── */
--z-base: 1;
--z-sticky: 20;
--z-overlay: 40;
--z-modal: 50;
/* ═══════════════════════════════════════════════════════════════════
LEGACY ALIASES — back-compat with existing inline styles + site.css
These map the old short-form (--c-*, --r, --r-lg) to the new tokens
so existing pages don't break during migration. Phase out gradually.
═══════════════════════════════════════════════════════════════════ */
--c-bg: var(--color-bg);
--c-bg-2: var(--color-bg-deep);
--c-fg: var(--color-fg);
--c-fg-bright: var(--color-fg);
--c-muted: var(--color-muted);
--c-line: var(--color-line);
--c-line-bright:var(--color-line-bright);
--c-primary: var(--color-primary);
--c-primary-2: var(--color-primary-2);
--c-accent: var(--color-accent);
--c-accent-fg: #ffffff;
--c-good: var(--color-good);
--c-good-bg: var(--color-good-bg);
--c-warn: var(--color-warn);
--c-warn-bg: var(--color-warn-bg);
--c-cite: var(--color-cite);
--c-cite-fg: var(--color-cite-fg);
--r: var(--radius);
--r-lg: var(--radius-lg);
/* --w-content and --w-wide already match between old + new */
}
/* ══════════════════════════════════════════════════════════════════════
Reduced-motion preference — site-wide
Every transition / animation declared in design-system.css respects
this. Page-scoped CSS should ALSO honour it (see playbook §QA).
══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}