/**
 * Design Tokens — Resumo IPTV Premium v1.2
 * Documento 02 — Design System
 */
:root {
  /* Paleta primária */
  --color-primary-900: #0b1220;
  --color-primary-800: #13203a;

  /* Acentos */
  --color-accent-cyan: #00c8ff;
  --color-accent-teal: #2dd4bf;

  /* Neutros */
  --color-white: #ffffff;
  --color-neutral-50: #f5f7fa;
  --color-neutral-300: #cbd5e1;
  --color-neutral-500: #64748b;

  /* Feedback */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;

  /* Semânticos */
  --color-primary: var(--color-primary-800);
  --color-secondary: var(--color-accent-cyan);
  --color-text: var(--color-primary-900);
  --color-text-muted: var(--color-neutral-500);
  --color-background: var(--color-white);
  --color-surface: var(--color-neutral-50);
  --color-border: var(--color-neutral-300);

  /* Espaçamentos (8px scale) */
  --spacing-1: 0.5rem;   /* 8 */
  --spacing-2: 1rem;     /* 16 */
  --spacing-3: 1.5rem;   /* 24 */
  --spacing-4: 2rem;     /* 32 */
  --spacing-5: 3rem;     /* 48 */
  --spacing-6: 4rem;     /* 64 */
  --spacing-7: 6rem;     /* 96 */

  /* Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;     /* 16px cards */
  --radius-button: 0.75rem; /* 12px */

  /* Sombras */
  --shadow-sm: 0 1px 3px rgb(11 18 32 / 0.06);
  --shadow-md: 0 8px 24px rgb(11 18 32 / 0.08);
  --shadow-lg: 0 16px 40px rgb(11 18 32 / 0.12);
  --shadow-card: var(--shadow-md);
  --shadow-card-hover: var(--shadow-lg);

  /* Tipografia */
  --font-family-base: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-small: 0.9375rem;  /* 15/24 */
  --font-size-body: 1.125rem;    /* 18/30 */
  --font-size-h5: 1.25rem;       /* 20/28 */
  --font-size-h4: 1.5rem;        /* 24/32 */
  --font-size-h3: 1.875rem;      /* 30/38 */
  --font-size-h2: 2.375rem;      /* 38/46 */
  --font-size-h1: 3rem;          /* 48/56 */
  --line-height-small: 1.6;
  --line-height-body: 1.6667;
  --line-height-h5: 1.4;
  --line-height-h4: 1.3333;
  --line-height-h3: 1.2667;
  --line-height-h2: 1.2105;
  --line-height-h1: 1.1667;

  /* Layout */
  --container: 81.25rem;         /* 1300px */
  --container-narrow: 51.25rem; /* 820px */
  --content-width: 47.5rem;      /* 760px */

  /* Focus */
  --focus-ring: 2px solid var(--color-accent-cyan);
  --focus-offset: 2px;

  /* Breakpoints (referência) */
  --bp-sm: 30rem;    /* 480 */
  --bp-md: 48rem;    /* 768 */
  --bp-lg: 64rem;    /* 1024 */
  --bp-xl: 80rem;    /* 1280 */
  --bp-2xl: 90rem;   /* 1440 */

  /* Transições */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

@media (max-width: 47.99rem) {
  :root {
    --font-size-h1: 2.125rem;
    --font-size-h2: 1.75rem;
    --font-size-h3: 1.5rem;
    --font-size-h4: 1.25rem;
    --font-size-h5: 1.125rem;
    --font-size-body: 1rem;
    --spacing-5: 2rem;
    --spacing-6: 3rem;
    --spacing-7: 4rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light;
  }
}