/* ==========================================================================
   Design tokens – samen-iptv
   Source of truth: design/design-spec.md. Variables only: no selectors other
   than :root. Fonts are loaded once by hec_fonts() in functions.php.

   Breakpoints (media queries cannot read variables), mobile-first:
     480px  large phones
     768px  tablets
     1024px desktop
   ========================================================================== */

:root {
	/* ---- Colour: dark bands (topbar, header, hero, pricing, cta, footer) --- */
	--c-dark-bg: #0A1D16;          /* very dark green, base dark band       */
	--c-dark-bg-deep: #07150F;     /* topbar, footer bottom bar             */
	--c-dark-bg-2: #0E2A20;        /* lifted dark band (pricing, cta)       */
	--c-dark-surface: #133227;     /* cards on dark                         */
	--c-dark-border: #24473A;      /* hairlines, card borders (decorative)  */
	--c-dark-border-strong: #5A7F6E; /* form fields on dark (>= 3:1)        */
	--c-dark-text: #F3F7F4;        /* 16.2:1 on --c-dark-bg                 */
	--c-dark-muted: #A7B9B0;       /* 8.5:1 on bg, 6.8:1 on surface         */

	/* ---- Colour: light bands (features, comparison, reviews, faq) -------- */
	--c-light-bg: #EFF4F1;         /* pale mint grey                        */
	--c-white: #FFFFFF;            /* white band / alternating light band   */
	--c-light-surface: #FFFFFF;    /* cards and accordion rows on light     */
	--c-light-border: #DAE4DE;     /* hairlines, card borders (decorative)  */
	--c-light-border-strong: #748880; /* form fields on light (>= 3:1)      */
	--c-light-icon-bg: #E1EDE4;    /* circle behind icons on light          */
	--c-light-text: #0D1B15;       /* 15.9:1 on --c-light-bg                */
	--c-light-muted: #4A5B53;      /* 6.5:1 on light bg, 7.2:1 on white     */

	/* ---- Colour: accent ---------------------------------------------------- */
	--c-accent: #BDF967;           /* brand lime (logo): buttons, badges, highlights, checks on dark */
	--c-accent-hover: #AAE84F;
	--c-on-accent: #0A1D16;        /* text on lime: 14.1:1                  */
	--c-accent-ink: #1E6B3A;       /* accent as text/icon on light: 5.9:1   */
	--c-accent-tint: #1B3B2B;      /* icon circle / chip background on dark */

	/* ---- Colour: states ---------------------------------------------------- */
	--c-focus-dark: #BDF967;       /* focus ring on dark bands              */
	--c-focus-light: #1E6B3A;      /* focus ring on light bands             */
	--c-danger: #C2362F;           /* errors on light: 5.4:1 on white       */
	--c-danger-on-dark: #FF8F86;   /* errors on dark: 7.9:1                 */

	/* ---- Overlays (image scrims; colour values live only here) ------------ */
	--c-shadow: rgba(7, 21, 15, 0.18);
	--grad-hero: linear-gradient(90deg, rgba(10, 29, 22, 0.97) 0%, rgba(10, 29, 22, 0.86) 38%, rgba(10, 29, 22, 0.25) 72%, rgba(10, 29, 22, 0.4) 100%);
	--grad-hero-mobile: linear-gradient(180deg, rgba(10, 29, 22, 0.35) 0%, rgba(10, 29, 22, 0.9) 55%, #0A1D16 100%);
	--grad-card: linear-gradient(180deg, rgba(7, 21, 15, 0) 50%, rgba(7, 21, 15, 0.72) 100%);
	--grad-glow: radial-gradient(60% 60% at 50% 0%, rgba(189, 249, 103, 0.08) 0%, rgba(189, 249, 103, 0) 100%);

	/* ---- Typography -------------------------------------------------------- */
	--f-heading: "Outfit", "Outfit Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--f-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--fs-xs: 0.75rem;                                     /* 12  eyebrow, badge, legal  */
	--fs-sm: 0.875rem;                                    /* 14  meta, footer bottom    */
	--fs-base: 1rem;                                      /* 16  body                   */
	--fs-md: 1.125rem;                                    /* 18  lead, accordion q      */
	--fs-lg: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);    /* 20–24  h3, card titles     */
	--fs-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);        /* 24–32  small h2, prices    */
	--fs-2xl: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);  /* 30–44  section h2          */
	--fs-3xl: clamp(2.375rem, 1.6rem + 3.5vw, 4rem);      /* 38–64  hero h1             */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	--lh-tight: 1.06;      /* hero h1        */
	--lh-heading: 1.18;    /* h2–h4          */
	--lh-body: 1.6;        /* paragraphs     */
	--ls-tight: -0.02em;   /* headings       */
	--ls-eyebrow: 0.16em;  /* uppercase eyebrows, badges */
	--measure: 62ch;       /* max line length for paragraphs */

	/* ---- Spacing (4px base) ------------------------------------------------ */
	--space-1: 0.25rem;   /*  4 */
	--space-2: 0.5rem;    /*  8 */
	--space-3: 0.75rem;   /* 12 */
	--space-4: 1rem;      /* 16 */
	--space-5: 1.5rem;    /* 24 */
	--space-6: 2rem;      /* 32 */
	--space-7: 3rem;      /* 48 */
	--space-8: 4rem;      /* 64 */
	--space-9: 6rem;      /* 96 */
	--space-section: clamp(4rem, 2.9rem + 4.6vw, 7rem);       /* 64–112 vertical band padding */
	--space-section-sm: clamp(3rem, 2.4rem + 2.6vw, 4.5rem);  /* 48–72  compact bands         */

	/* ---- Layout ------------------------------------------------------------ */
	--container: 1240px;         /* content width inside every band   */
	--container-narrow: 880px;   /* faq list, centred text blocks     */
	--gutter: clamp(1rem, 0.4rem + 2.6vw, 2rem); /* 16 at 375px, 32 at desktop */
	--header-h: 72px;            /* sticky offset, scroll-margin      */

	/* ---- Shape & elevation ------------------------------------------------- */
	--radius-sm: 8px;      /* inputs, small tiles   */
	--radius: 14px;        /* cards                 */
	--radius-lg: 20px;     /* large media, panels   */
	--radius-pill: 999px;  /* buttons, badges, chips */
	--shadow-sm: 0 1px 2px var(--c-shadow);
	--shadow-md: 0 12px 32px -12px var(--c-shadow);

	/* ---- Icons & media ----------------------------------------------------- */
	--icon: 1.5rem;          /* 24 – every UI icon        */
	--icon-sm: 1.125rem;     /* 18 – inline / list checks */
	--icon-badge: 3.25rem;   /* 52 – circle behind icons  */
	--icon-stroke: 1.75;     /* stroke-width of line icons */
	--ratio-card: 3 / 4;     /* category / poster cards   */
	--ratio-media: 4 / 3;    /* split-section images      */
	--ratio-wide: 16 / 9;    /* hero art, video           */

	/* ---- Motion ------------------------------------------------------------ */
	--dur: 0.2s;
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--z-header: 100;
}