/**
 * Design tokens for cubeworldfilms.com.
 *
 * Source of truth: Elementor's active Kit ("Kit Styles: Vidtio", post ID 13,
 * option `elementor_active_kit` = 13). Pulled from its `_elementor_page_settings`
 * postmeta and cross-checked against actual hex-color frequency across every
 * generated Elementor CSS file (wp-content/uploads/elementor/css/*.css), because
 * the Kit had some stale literal values that don't match what's actually
 * rendering (e.g. its saved button/link color #D6FB00 appears nowhere in the
 * live site; #F5C542 does, 67 times, and matches the Kit's own "primary"
 * global-color swatch — so that's what's captured here).
 *
 * As each component gets rebuilt outside Elementor, it should read colors and
 * type from these custom properties instead of hardcoding hex values, so the
 * whole site stays on one palette and a rebrand only ever means editing this
 * file.
 */

:root {
	/* ---- Brand / accent ---- */
	/* All three unified to one exact yellow (#F5FF00) per explicit
	   client request -- previously three distinct shades of gold
	   (#F5C542 main / #EEDC5C hover / #FFFB50 bright, matching
	   Elementor's Kit "Main color" and its own measured variants).
	   Kept as three separate tokens (not collapsed into one) so a
	   future request to differentiate hover/bright again doesn't
	   require re-touching every component that references them. */
	--color-primary: #F5FF00;
	--color-primary-hover: #F5FF00;
	--color-primary-bright: #F5FF00;

	/* ---- Neutrals ---- */
	--color-black: #000000;          /* Kit "Black color" -- dominant background */
	--color-near-black: #0C0D0E;
	--color-white: #FFFFFF;          /* Kit "White color" */
	--color-text: #D0D0D0;           /* Kit "Text color" -- body copy on dark backgrounds */

	/* Dark section backgrounds */
	--color-bg-dark-1: #141414;
	--color-bg-dark-2: #282828;

	/* Light section backgrounds (a few pages use light sections) */
	--color-bg-light-1: #F8F8F8;
	--color-bg-light-2: #F3EFEF;
	--color-bg-light-3: #F0F0F0;

	/* Borders / dividers */
	--color-border-on-dark: #FFFFFF2E;  /* translucent white, for borders over dark sections */
	--color-border-on-light: #7777772E; /* translucent black, for borders over light sections */
	--color-border-light: #E7E7E7;
	--color-gray-mid: #706F6F;          /* secondary/muted text on light backgrounds */

	--color-overlay: #02010100;         /* near-opaque black overlay used behind hero video/images */

	/* ---- Typography ---- */
	--font-heading: 'Oswald', sans-serif;
	--font-body: 'Familjen Grotesk', sans-serif;
	--font-nav-title: 'Inter', sans-serif;      /* fullscreen nav's section titles + Email Us button -- measured from production, not the Kit's own type scale */
	--font-nav-submenu: 'Montserrat', sans-serif; /* fullscreen nav's submenu items -- same, measured from production */

	--fs-h1: 70px;      --fs-h1-mobile: 36px;
	--fs-h2: 50px;      --fs-h2-mobile: 42px;
	--fs-h3: 32px;      --fs-h3-mobile: 26px;
	--fs-h4: 24px;      --fs-h4-mobile: 17px;
	--fs-h5: 16px;      --fs-h5-mobile: 17px;
	--fs-h6: 18px;      --fs-h6-mobile: 16px;
	--fs-body: 18px;    --fs-body-mobile: 16px;

	--lh-h1: 1.1;  --lh-h1-mobile: 1.2;
	--lh-h2: 1.2;  --lh-h2-mobile: 1;
	--lh-h3: 1.3;  --lh-h3-mobile: 1.1;
	--lh-h4: 1.3;
	--lh-h5: 1.4;
	--lh-h6: 1.4;
	--lh-body: 1.4;

	--fw-h1: 700;
	--fw-h2: 700;
	--fw-h3: 600;
	--fw-h4: 400;
	--fw-h5: 600;
	--fw-h6: 400;
	--fw-body: 400;
	--fw-button: 600;

	/* ---- Layout ---- */
	--container-width: 1250px;
	--button-radius: 5px;
	--button-padding: 15px 30px;

	/* ---- Breakpoints (match Elementor's kit viewport settings) ---- */
	--bp-tablet: 1024px; /* below this = tablet */
	--bp-mobile: 767px;  /* below this = mobile */

	/* ---- Text-on-image legibility ---- */
	/* A soft black halo behind every heading/text/button that sits
	   directly on a photo (hero, split-section, pattern-intro, Inquire,
	   Podcast's Services strip) -- per the client's explicit request,
	   not a production measurement. Layered (tight + wide blur, no
	   offset) so it reads as an even glow around the letterforms
	   instead of a directional drop shadow. One token so every
	   component stays visually consistent and a future tweak is a
	   single-line change. See MIGRATION.md. */
	--text-shadow-halo: 0 0 6px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.6);
}

/**
 * Deliberately no bare-element rules here (h1, body, a, etc). This file is
 * loaded on every page, including ones Elementor still fully owns. A rule
 * like `h1 { font-size: var(--fs-h1) }` doesn't stay scoped to "components
 * we built" -- it silently overrides every h1 on the site, including
 * Elementor's own hero headings with their own custom per-widget sizing.
 * That's exactly what broke the homepage hero's stacked/pill heading here
 * (see MIGRATION.md). Each native component must apply these tokens itself,
 * scoped to its own classes -- see header.css / nav-menu.css for the
 * pattern. Only add a bare-element rule here once Elementor is fully gone
 * (Phase 9) and there's no more foreign content left for it to clobber.
 */