/*
Theme Name: Plex IPTV Child
Theme URI: https://plexiptv.us
Template: hello-elementor
Author: Plex IPTV
Description: Child theme of Hello Elementor for plexiptv.us. Holds the design tokens (below), the site config (inc/config.php: WhatsApp, email, prices), built-in SEO (meta, canonical, Open Graph, schema, breadcrumbs), and the floating WhatsApp button and mobile bottom bar. All page content, the header and the footer are built in Elementor.
Version: 1.1.0
Requires at least: 6.4
Requires PHP: 7.4
License: Proprietary
Text Domain: plexiptv-child
*/

/* ==================================================================
   DESIGN TOKENS
   Colors, fonts, type scale, radius and spacing as CSS variables.
   Change a value here and the whole site follows. Component styles
   live in assets/css/design.css and only use these variables.
   ================================================================== */

:root {
  /* Surfaces */
  --bg: #0b0f1a;
  --bg-elevated: #0f1522;
  --card: #131a2a;
  --card-hover: #172036;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text: #f2f5ff; /* 15.9:1 on card */
  --muted: #9aa4c0; /* 7.0:1 on card */

  /* Accents */
  --accent: #7c5cff; /* brand purple: borders, glows, icons */
  --accent-btn: #6e4bfa; /* button fill: white text 5.2:1 (brand #7C5CFF is 4.35:1) */
  --accent-btn-hover: #7c5cff;
  --accent-text: #a08bff; /* purple used as text on dark: 6.9:1 */
  --accent-soft: rgba(124, 92, 255, 0.14);
  --cyan: #22d3ee; /* links and icons: 10.6:1 */
  --cyan-soft: rgba(34, 211, 238, 0.12);
  --wa: #25d366;
  --wa-hover: #3ee07a;
  --wa-text: #0b0f1a; /* dark text 9.7:1. White text on #25D366 is only 1.98:1 and fails AA */
  --gold: #ffb020;
  --gold-text: #0b0f1a;

  /* Type */
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.4vw, 2.35rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.6vw, 3.4rem);

  /* Shape and space */
  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;
  --gutter: 16px;
  --container: 1200px;
  --header-h: 64px;
  --bottom-bar-h: 68px;
  --section-y: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --glow-accent: 0 0 0 1px rgba(124, 92, 255, 0.45), 0 18px 50px -14px rgba(124, 92, 255, 0.55);
  --glow-gold: 0 0 0 1px rgba(255, 176, 32, 0.55), 0 22px 60px -18px rgba(255, 176, 32, 0.35);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --header-h: 72px;
  }
}