/* ==========================================================================
   VoIP Experts design tokens
   Layer 1: primitives (two chromatic ramps, one neutral ramp, singleton accents)
   Layer 2: semantic tokens (light + dark, same roles)
   Components consume layer 2 only. Provider logos and photography are exempt.
   ========================================================================== */

:root {
  /* ---------- Primary: electric blue ---------- */
  --blue-50: #EFF5FF;
  --blue-100: #DDEAFF;
  --blue-200: #C2D9FF;
  --blue-300: #9CC0FF;
  --blue-400: #6E9EFF;
  --blue-500: #477DF8;
  --blue-600: #405DF5;
  --blue-700: #304BD7;
  --blue-800: #253DA5;
  --blue-900: #182F73;
  --blue-950: #10204A;

  /* ---------- Secondary: warm yellow / amber ---------- */
  --amber-50: #FFF9EA;
  --amber-100: #FFF0C8;
  --amber-200: #FFE29A;
  --amber-300: #FFD363;
  --amber-400: #FFC538;
  --amber-500: #F8B220;
  --amber-600: #E99B16;
  --amber-700: #BC7710;
  --amber-800: #925B13;
  --amber-900: #714611;
  --amber-950: #482C0A;

  /* ---------- Neutral: cool blue-gray (navy lives here) ---------- */
  --gray-0: #FFFFFF;
  --gray-25: #FCFDFF;
  --gray-50: #F7F9FD;
  --gray-100: #F0F3FA;
  --gray-200: #E4EAF3;
  --gray-300: #CDD6E4;
  --gray-400: #9DABBE;
  --gray-500: #748498;
  --gray-600: #536679;
  --gray-700: #374B60;
  --gray-800: #24374B;
  --gray-900: #11283B;
  --gray-950: #091B2D;

  /* ---------- Singleton accents (never ramps) ---------- */
  --accent-cyan: #13C7F5;
  --accent-success: #20B987;
  --accent-coral: #F36572;
  --accent-purple: #7151D8;
  --accent-error: #E34B57;
  --accent-warning: #E99B16;

  /* ---------- Typography ---------- */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --text-display1: 56px;  --leading-display1: 64px;  --tracking-display1: -0.035em;
  --text-display2: 40px;  --leading-display2: 48px;  --tracking-display2: -0.025em;
  --text-h1: 32px;        --leading-h1: 40px;        --tracking-h1: -0.02em;
  --text-headline: 24px;  --leading-headline: 32px;  --tracking-headline: -0.015em;
  --text-h3: 20px;        --leading-h3: 28px;
  --text-body-lg: 18px;   --leading-body-lg: 30px;
  --text-body: 16px;      --leading-body: 26px;
  --text-body-sm: 14px;   --leading-body-sm: 22px;
  --text-caption: 12px;   --leading-caption: 18px;

  /* ---------- Spacing (4px base) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  --section-gap: var(--space-48);
  --gutter: var(--space-16);
  --container-max: 100%;

  /* ---------- Radii ---------- */
  --radius-badge: 9999px;
  --radius-sm: 6px;
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-card-lg: 16px;
  --radius-hero: 24px;
  --radius-showcase: 32px;
  --radius-image: 12px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-hover: 180ms;
  --duration-expand: 240ms;

  /* ---------- Layout ---------- */
  --header-height: 64px;
}

@media (min-width: 640px) { :root { --gutter: var(--space-24); } }
@media (min-width: 768px) { :root { --gutter: var(--space-32); --section-gap: var(--space-64); } }
@media (min-width: 1024px) { :root { --container-max: 1152px; --header-height: 76px; --section-gap: var(--space-80); } }
@media (min-width: 1280px) { :root { --gutter: var(--space-40); --container-max: 1200px; --section-gap: var(--space-96); } }
@media (min-width: 1536px) { :root { --gutter: var(--space-48); --container-max: 1280px; } }

/* ==========================================================================
   Semantic tokens: light (default)
   ========================================================================== */
:root {
  color-scheme: light;

  /* Surfaces */
  --color-canvas: #EEF2FF;
  --color-canvas-muted: var(--gray-50);
  --color-surface: var(--gray-0);
  --color-surface-raised: var(--gray-0);
  --color-surface-subtle: var(--gray-50);
  --color-surface-interactive: var(--blue-50);
  --color-surface-selected: var(--blue-100);
  --color-surface-trust: var(--blue-600);
  --color-surface-offer: var(--amber-50);
  --color-header: color-mix(in srgb, var(--gray-0) 88%, transparent);
  --color-logo-plate: transparent;
  --logo-plate-pad: 0;
  --color-overlay: color-mix(in srgb, var(--gray-950) 48%, transparent);

  /* Text */
  --color-text-primary: var(--gray-950);
  --color-text-secondary: var(--gray-700);
  --color-text-muted: var(--gray-600);
  --color-text-inverse: var(--gray-0);
  --color-text-link: var(--blue-700);
  --color-text-highlight: var(--blue-600);
  --color-text-on-trust: var(--gray-0);
  --color-text-on-trust-muted: color-mix(in srgb, var(--gray-0) 82%, transparent);
  --color-text-offer-on-dark: var(--amber-300);

  /* Borders */
  --color-border-default: var(--gray-200);
  --color-border-subtle: var(--gray-100);
  --color-border-strong: var(--gray-300);
  --color-border-focused: var(--blue-600);
  --color-border-featured: var(--amber-400);
  --color-border-hover: var(--blue-300);
  --color-border-on-trust: color-mix(in srgb, var(--gray-0) 22%, transparent);

  /* Icons */
  --color-icon-default: var(--blue-600);
  --color-icon-muted: var(--gray-500);
  --color-icon-success: var(--accent-success);
  --color-icon-accent: var(--accent-cyan);
  --color-icon-editorial: var(--accent-purple);

  /* Buttons */
  --color-btn-conversion-text: var(--gray-950);
  --color-btn-primary-text: var(--gray-0);
  --color-btn-secondary-text: var(--color-text-link);
  --color-btn-disabled-bg: var(--amber-100);
  --color-btn-disabled-text: var(--gray-500);

  /* Ratings, ribbons, badges */
  --color-rating-star: var(--amber-500);
  --color-rating-star-empty: var(--gray-300);
  --color-ribbon-bg: var(--gradient-award);
  --color-ribbon-text: var(--gray-950);
  --color-rank-bg: var(--blue-50);
  --color-rank-text: var(--blue-700);
  --color-score-chip-bg: var(--blue-50);
  --color-chip-success-bg: color-mix(in srgb, var(--accent-success) 12%, transparent);
  --color-chip-success-text: var(--color-text-primary); /* success hue stays on the icon; text keeps 4.5:1 */
  --color-chip-neutral-bg: var(--gray-100);
  --color-chip-neutral-text: var(--gray-700);

  /* Feedback */
  --color-success: var(--accent-success);
  --color-error: var(--accent-error);
  --color-warning: var(--accent-warning);
  --color-focus-ring: color-mix(in srgb, var(--blue-600) 28%, transparent);

  /* Chart categories (methodology donut) */
  --chart-1: var(--blue-600);
  --chart-2: var(--gray-950);
  --chart-3: var(--blue-300);
  --chart-4: var(--accent-cyan);
  --chart-5: var(--blue-800);
  --chart-6: var(--accent-coral);

  /* Footer */
  --color-footer-bg: var(--gray-950);
  --color-footer-heading: var(--gray-0);
  --color-footer-text: var(--gray-300);
  --color-footer-link-hover: var(--blue-300);
  --color-footer-border: color-mix(in srgb, var(--gray-300) 16%, transparent);

  /* Gradients (approved colors and their transparency variants only) */
  --gradient-hero: linear-gradient(135deg, var(--gray-0) 0%, var(--blue-50) 38%, #A5BDFF 78%, var(--blue-400) 100%);
  --gradient-hero-glow: radial-gradient(60% 60% at 70% 80%, color-mix(in srgb, var(--blue-400) 55%, transparent) 0%, transparent 70%);
  --gradient-blue-action: linear-gradient(90deg, var(--accent-cyan) 0%, var(--blue-600) 100%);
  --gradient-blue-action-hover: linear-gradient(90deg, var(--blue-500) 0%, var(--blue-700) 100%);
  /* Text-bearing primary buttons: white text keeps >= 5.1:1 across the whole gradient.
     Cyan stays as glow and top-edge highlight; --gradient-blue-action remains for decorative fills. */
  --color-btn-primary-bg: linear-gradient(90deg, var(--blue-600) 0%, var(--blue-700) 100%);
  --color-btn-primary-bg-hover: linear-gradient(90deg, var(--blue-700) 0%, var(--blue-800) 100%);
  --shadow-button-primary: 0 4px 14px color-mix(in srgb, var(--accent-cyan) 28%, transparent), inset 0 1px 0 color-mix(in srgb, var(--accent-cyan) 60%, transparent);
  --gradient-yellow-action: linear-gradient(90deg, var(--amber-400) 0%, var(--amber-300) 55%, var(--amber-500) 100%);
  --gradient-yellow-action-hover: linear-gradient(90deg, var(--amber-500) 0%, var(--amber-400) 55%, var(--amber-600) 100%);
  --gradient-trust: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-600) 55%, var(--blue-500) 100%);
  /* Award ribbon: gold reads as "winner" and matches the trophy and featured border */
  --gradient-award: linear-gradient(90deg, var(--amber-200) 0%, var(--amber-300) 45%, var(--amber-400) 100%);
  --shadow-ribbon: 0 4px 12px color-mix(in srgb, var(--amber-500) 35%, transparent);
  --color-ribbon-icon: var(--amber-800);
  --gradient-promo: linear-gradient(90deg, var(--gray-950) 0%, var(--blue-950) 55%, var(--blue-800) 100%);
  --gradient-panel: linear-gradient(180deg, var(--blue-50) 0%, color-mix(in srgb, var(--blue-200) 70%, transparent) 100%);
  --gradient-page-intro: linear-gradient(120deg, var(--gray-0) 0%, var(--blue-50) 55%, var(--blue-200) 100%);

  /* Shadows */
  --shadow-card: 0 4px 16px rgba(9, 27, 45, 0.04);
  --shadow-raised: 0 12px 32px rgba(23, 46, 100, 0.10);
  --shadow-hero: 0 20px 56px rgba(55, 94, 200, 0.10);
  --shadow-button: 0 4px 12px rgba(64, 93, 245, 0.18);
  --shadow-button-conversion: 0 4px 12px rgba(248, 178, 32, 0.22);
  --shadow-featured: 0 8px 26px rgba(248, 178, 32, 0.10);
}

/* ==========================================================================
   Semantic tokens: dark (explicit choice, or system preference)
   ========================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-canvas: #081426;
  --color-canvas-muted: #0C1B30;
  --color-surface: #112238;
  --color-surface-raised: #192C43;
  --color-surface-subtle: #17273C;
  --color-surface-interactive: #203B62;
  --color-surface-selected: #243E70;
  --color-surface-trust: var(--blue-900);
  --color-surface-offer: color-mix(in srgb, var(--amber-400) 10%, #112238);
  --color-header: color-mix(in srgb, #0C1B30 86%, transparent);
  --color-logo-plate: var(--gray-0);
  --logo-plate-pad: 6px 10px;
  --color-overlay: color-mix(in srgb, #000000 60%, transparent);

  --color-text-primary: #F6F9FF;
  --color-text-secondary: #D5E1F0;
  --color-text-muted: #B0C1D6;
  --color-text-inverse: var(--gray-950);
  --color-text-link: var(--blue-300);
  --color-text-highlight: var(--blue-300);
  --color-text-on-trust: var(--gray-0);
  --color-text-on-trust-muted: color-mix(in srgb, var(--gray-0) 80%, transparent);

  --color-border-default: #30445D;
  --color-border-subtle: #273A51;
  --color-border-strong: #47617E;
  --color-border-focused: var(--blue-300);
  --color-border-featured: var(--amber-400);
  --color-border-hover: var(--blue-400);
  --color-border-on-trust: color-mix(in srgb, var(--gray-0) 16%, transparent);

  --color-icon-default: var(--blue-300);
  --color-icon-muted: #9BB1C9;
  --color-icon-success: var(--accent-success);
  --color-icon-accent: var(--accent-cyan);
  --color-icon-editorial: color-mix(in srgb, var(--accent-purple) 60%, var(--gray-0));

  --color-btn-conversion-text: var(--gray-950);
  --color-btn-primary-text: var(--gray-0);
  --color-btn-disabled-bg: color-mix(in srgb, var(--amber-400) 22%, #112238);
  --color-btn-disabled-text: #9BB1C9;

  --color-rating-star: var(--amber-400);
  --color-rating-star-empty: #52647C;
  --color-ribbon-bg: var(--gradient-award);
  --color-ribbon-text: var(--gray-950);
  --color-rank-bg: #203B62;
  --color-rank-text: var(--blue-200);
  --color-score-chip-bg: #203B62;
  --color-chip-success-bg: color-mix(in srgb, var(--accent-success) 18%, transparent);
  --color-chip-success-text: var(--color-text-primary);
  --color-chip-neutral-bg: #203B62;
  --color-chip-neutral-text: #D5E1F0;

  --color-focus-ring: color-mix(in srgb, var(--blue-300) 34%, transparent);

  --chart-1: var(--blue-500);
  --chart-2: var(--gray-100);
  --chart-3: var(--blue-300);
  --chart-4: var(--accent-cyan);
  --chart-5: var(--blue-800);
  --chart-6: var(--accent-coral);

  --color-footer-bg: #06111F;
  --color-footer-heading: var(--gray-0);
  --color-footer-text: #B0C1D6;
  --color-footer-link-hover: var(--blue-300);
  --color-footer-border: #1B2C42;

  --gradient-hero: linear-gradient(135deg, var(--gray-950) 0%, var(--blue-950) 55%, var(--blue-800) 100%);
  --gradient-hero-glow: radial-gradient(55% 55% at 72% 78%, color-mix(in srgb, var(--blue-500) 38%, transparent) 0%, transparent 72%);
  --gradient-trust: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-900) 55%, var(--blue-800) 100%);
  --gradient-promo: linear-gradient(90deg, var(--gray-950) 0%, var(--blue-950) 55%, var(--blue-800) 100%);
  --gradient-panel: linear-gradient(180deg, #17273C 0%, color-mix(in srgb, var(--blue-800) 45%, #112238) 100%);
  --gradient-page-intro: linear-gradient(120deg, #112238 0%, var(--blue-950) 60%, color-mix(in srgb, var(--blue-800) 70%, #112238) 100%);

  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.18);
  --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.30);
  --shadow-hero: 0 24px 64px rgba(0, 0, 0, 0.30);
  --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.24);
  --shadow-button-conversion: 0 4px 16px rgba(0, 0, 0, 0.24);
  --shadow-featured: 0 8px 26px rgba(0, 0, 0, 0.22);
}

/* System preference: mirror the dark block unless the visitor chose light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-canvas: #081426;
    --color-canvas-muted: #0C1B30;
    --color-surface: #112238;
    --color-surface-raised: #192C43;
    --color-surface-subtle: #17273C;
    --color-surface-interactive: #203B62;
    --color-surface-selected: #243E70;
    --color-surface-trust: var(--blue-900);
    --color-surface-offer: color-mix(in srgb, var(--amber-400) 10%, #112238);
    --color-header: color-mix(in srgb, #0C1B30 86%, transparent);
    --color-logo-plate: var(--gray-0);
    --logo-plate-pad: 6px 10px;
  --color-logo-plate: var(--gray-0);
  --logo-plate-pad: 6px 10px;
    --color-overlay: color-mix(in srgb, #000000 60%, transparent);

    --color-text-primary: #F6F9FF;
    --color-text-secondary: #D5E1F0;
    --color-text-muted: #B0C1D6;
    --color-text-inverse: var(--gray-950);
    --color-text-link: var(--blue-300);
    --color-text-highlight: var(--blue-300);
    --color-text-on-trust: var(--gray-0);
    --color-text-on-trust-muted: color-mix(in srgb, var(--gray-0) 80%, transparent);

    --color-border-default: #30445D;
    --color-border-subtle: #273A51;
    --color-border-strong: #47617E;
    --color-border-focused: var(--blue-300);
    --color-border-featured: var(--amber-400);
    --color-border-hover: var(--blue-400);
    --color-border-on-trust: color-mix(in srgb, var(--gray-0) 16%, transparent);

    --color-icon-default: var(--blue-300);
    --color-icon-muted: #9BB1C9;
    --color-icon-success: var(--accent-success);
    --color-icon-accent: var(--accent-cyan);
    --color-icon-editorial: color-mix(in srgb, var(--accent-purple) 60%, var(--gray-0));

    --color-btn-conversion-text: var(--gray-950);
    --color-btn-primary-text: var(--gray-0);
    --color-btn-disabled-bg: color-mix(in srgb, var(--amber-400) 22%, #112238);
    --color-btn-disabled-text: #9BB1C9;

    --color-rating-star: var(--amber-400);
    --color-rating-star-empty: #52647C;
    --color-ribbon-bg: var(--gradient-award);
    --color-ribbon-text: var(--gray-950);
    --color-rank-bg: #203B62;
    --color-rank-text: var(--blue-200);
    --color-score-chip-bg: #203B62;
    --color-chip-success-bg: color-mix(in srgb, var(--accent-success) 18%, transparent);
    --color-chip-success-text: var(--color-text-primary);
    --color-chip-neutral-bg: #203B62;
    --color-chip-neutral-text: #D5E1F0;

    --color-focus-ring: color-mix(in srgb, var(--blue-300) 34%, transparent);

    --chart-1: var(--blue-500);
    --chart-2: var(--gray-100);
    --chart-3: var(--blue-300);
    --chart-4: var(--accent-cyan);
    --chart-5: var(--blue-800);
    --chart-6: var(--accent-coral);

    --color-footer-bg: #06111F;
    --color-footer-heading: var(--gray-0);
    --color-footer-text: #B0C1D6;
    --color-footer-link-hover: var(--blue-300);
    --color-footer-border: #1B2C42;

    --gradient-hero: linear-gradient(135deg, var(--gray-950) 0%, var(--blue-950) 55%, var(--blue-800) 100%);
    --gradient-hero-glow: radial-gradient(55% 55% at 72% 78%, color-mix(in srgb, var(--blue-500) 38%, transparent) 0%, transparent 72%);
    --gradient-trust: linear-gradient(135deg, var(--blue-950) 0%, var(--blue-900) 55%, var(--blue-800) 100%);
    --gradient-promo: linear-gradient(90deg, var(--gray-950) 0%, var(--blue-950) 55%, var(--blue-800) 100%);
    --gradient-panel: linear-gradient(180deg, #17273C 0%, color-mix(in srgb, var(--blue-800) 45%, #112238) 100%);
    --gradient-page-intro: linear-gradient(120deg, #112238 0%, var(--blue-950) 60%, color-mix(in srgb, var(--blue-800) 70%, #112238) 100%);

    --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.18);
    --shadow-raised: 0 16px 40px rgba(0, 0, 0, 0.30);
    --shadow-hero: 0 24px 64px rgba(0, 0, 0, 0.30);
    --shadow-button: 0 4px 16px rgba(0, 0, 0, 0.24);
    --shadow-button-conversion: 0 4px 16px rgba(0, 0, 0, 0.24);
    --shadow-featured: 0 8px 26px rgba(0, 0, 0, 0.22);
  }
}