/*
 * Pulse design tokens — iptvchecker.com
 * Dark is the default (dim room, screen glow). Light is a first-class theme
 * for resellers working in daylight. Status colors are for data only.
 */
:root {
  color-scheme: dark;

  /* Surfaces: deep ink, stepped */
  --bg: #0b1020;
  --surface-1: #111827;
  --surface-2: #161f33;
  --surface-3: #1d2840;
  --border: #26324a;
  --border-strong: #34425f;
  --overlay: rgba(4, 8, 18, 0.72);

  /* Text */
  --text: #e8eef8;
  --text-2: #a3b1c6;
  --text-3: #8391a8;

  /* Brand accent: electric cyan. One accent, used for actions and focus. */
  --accent: #22d3ee;
  --accent-hover: #67e8f9;
  --on-accent: #04202a;
  --accent-text: #5ee2f5;
  --accent-soft: rgba(34, 211, 238, 0.12);
  --accent-ring: rgba(34, 211, 238, 0.55);

  /* Status (data only) */
  --up: #22c55e;
  --up-text: #4ade80;
  --up-soft: rgba(34, 197, 94, 0.14);
  --warn: #f59e0b;
  --warn-text: #fbbf24;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --down: #ef4444;
  --down-text: #f87171;
  --down-soft: rgba(239, 68, 68, 0.14);
  --trial: #a78bfa;
  --trial-text: #c4b5fd;
  --trial-soft: rgba(167, 139, 250, 0.16);
  --nodata: #2a3550;

  /* Type */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 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-32: 2rem;
  --fs-44: 2.75rem;
  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-display: -0.025em;
  --tracking-label: 0.08em;

  /* Space (4px base) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* Elevation (used sparingly; borders do most of the work) */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 18px 48px rgba(0, 0, 0, 0.45);

  /* Layout */
  --container: 1120px;
  --container-narrow: 720px;
  --header-h: 60px;
  --touch: 44px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 320ms;

  /* Layers */
  --z-header: 40;
  --z-drawer: 50;
  --z-dialog: 60;
  --z-toast: 70;
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #f5f7fb;
  --surface-1: #ffffff;
  --surface-2: #f0f3f8;
  --surface-3: #e5eaf2;
  --border: #d8dfea;
  --border-strong: #b9c4d6;
  --overlay: rgba(11, 16, 32, 0.45);

  --text: #0b1324;
  --text-2: #3f4d64;
  --text-3: #5a687e;

  --accent: #0e7490;
  --accent-hover: #155e75;
  --on-accent: #ffffff;
  --accent-text: #0e7490;
  --accent-soft: rgba(14, 116, 144, 0.1);
  --accent-ring: rgba(14, 116, 144, 0.45);

  --up: #16a34a;
  --up-text: #15803d;
  --up-soft: rgba(22, 163, 74, 0.1);
  --warn: #d97706;
  --warn-text: #b45309;
  --warn-soft: rgba(217, 119, 6, 0.12);
  --down: #dc2626;
  --down-text: #b91c1c;
  --down-soft: rgba(220, 38, 38, 0.1);
  --trial: #7c3aed;
  --trial-text: #6d28d9;
  --trial-soft: rgba(124, 58, 237, 0.1);
  --nodata: #d3dae6;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-pop: 0 18px 48px rgba(15, 23, 42, 0.16);
}