/**
 * KÖP IPTV SVERIGE — DESIGN SYSTEM & TOKENS (PREMIUM SCANDINAVIAN LIGHT MODE)
 * Enhetlig, harmonisk och lyxig nordisk design med designad mönstrad bakgrund
 */

:root {
  /* Ljust tema Grundfärger & Ytor (Enhetlig Skandinavisk Ljustema) */
  --bg-base: #f8fafc;                 /* Krispig cool off-white bas */
  --bg-surface: #ffffff;              /* Ytor: Ren vit */
  --bg-surface-elevated: #ffffff;     /* Upphöjda element */
  --bg-surface-card: rgba(255, 255, 255, 0.94); /* Frostat vitt glaskort */
  --bg-glass: rgba(255, 255, 255, 0.9);
  --bg-glass-strong: rgba(255, 255, 255, 0.98);

  /* Ramar & Delare för ljust läge */
  --border-subtle: rgba(226, 232, 240, 0.85);
  --border-medium: #cbd5e1;
  --border-active: #0284c7;
  --border-focus: #00a2ff;

  /* Enhetliga Svensk Blå & Accentfärger för ljust läge */
  --accent-cyan: #0284c7;             /* Klar kungsblå/cyan för ljust läge */
  --accent-cyan-glow: rgba(2, 132, 199, 0.22);
  --accent-cyan-dark: #0369a1;
  
  --accent-teal: #059669;             /* Trygghetsgrön */
  --accent-teal-glow: rgba(5, 150, 105, 0.18);
  --accent-teal-dark: #047857;

  --accent-orange: #ea580c;
  --accent-orange-glow: rgba(234, 88, 12, 0.18);
  --accent-orange-dark: #c2410c;

  /* Varumärkes- och förtroendefärger */
  --color-whatsapp: #16a34a;
  --color-telegram: #0284c7;
  --color-email: #0284c7;
  --color-swish: #0284c7;

  /* Typografi & textfärger i ljust läge */
  --text-main: #0f172a;               /* Mörk skiffer/obsidian för högsta kontrast */
  --text-secondary: #334155;          /* Mjuk mörkgrå för brödtext */
  --text-muted: #64748b;              /* Dämpad skiffergrå för detaljer */
  --text-inverse: #ffffff;            /* Vit text för färgade knappar */

  /* Typsnitt */
  --font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', Consolas, Monaco, monospace;

  /* Ljusa, krispiga skuggor */
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08), 0 2px 6px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.12), 0 4px 12px -2px rgba(15, 23, 42, 0.06);
  --shadow-cyan: 0 8px 24px rgba(2, 132, 199, 0.28);
  --shadow-teal: 0 8px 24px rgba(5, 150, 105, 0.2);

  /* Radier */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.16s ease;
  --transition-base: 0.24s ease;
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Container */
  --container-max: 1240px;
  --container-pad: 24px;
}