/* ============================================================================
   RAVIX — CSS VARIABLES (Single Source of Truth)
   ============================================================================
   All colour, typography, weight, spacing, motion, and layout tokens live
   here. Every other stylesheet in the theme references these — no raw hex
   codes, no magic numbers in component or page CSS.

   Defined on :root so they cascade everywhere.
   ============================================================================ */

:root {

	/* ------------------------------------------------------------------------
	   COLOURS — RAW PALETTE
	   ------------------------------------------------------------------------
	   Brand palette per Ravix design spec. These are the literal values.
	   Component CSS should generally prefer the semantic aliases below.
	   ------------------------------------------------------------------------ */

	--color-black:        #000000;   /* Pure background */
	--color-near-black:   #141414;   /* Section background variant */
	--color-dark-1:       #232323;   /* Card / surface variant */
	--color-dark-2:       #282726;   /* Copyright text — barely visible */
	--color-charcoal:     #494949;   /* Borders only — never text */
	--color-mid-1:        #595959;   /* Numerals / quiet text */
	--color-mid-2:        #6b6b6b;   /* Eyebrow labels */
	--color-mid-3:        #777777;   /* Reserved */
	--color-grey:         #8c8c8c;   /* Secondary info */
	--color-body:         #b8b8b8;   /* Body copy */
	--color-white:        #ffffff;   /* Headlines, project titles */


	/* ------------------------------------------------------------------------
	   COLOURS — SEMANTIC ALIASES
	   ------------------------------------------------------------------------
	   Use these in component CSS — they describe the role, not the shade.
	   If the brand palette ever shifts, only the raw values above change.
	   ------------------------------------------------------------------------ */

	--bg-primary:         var(--color-black);
	--bg-secondary:       var(--color-near-black);
	--bg-tertiary:        var(--color-dark-1);

	--text-headline:      var(--color-white);
	--text-project-title: var(--color-white);
	--text-body:          var(--color-body);
	--text-secondary:     var(--color-grey);
	--text-eyebrow:       var(--color-mid-2);
	--text-quiet:         var(--color-mid-1);
	--text-faint:         var(--color-dark-2);

	--border-subtle:      var(--color-charcoal);
	--border-hairline:    rgba(255, 255, 255, 0.05);
	--overlay-card-hover: rgba(0, 0, 0, 0.45);


	/* ------------------------------------------------------------------------
	   TYPOGRAPHY
	   ------------------------------------------------------------------------
	   DM Sans across the entire site. Three weights only — 400, 500, 700.
	   No other typefaces, no other weights.
	   ------------------------------------------------------------------------ */

	--font-primary:       'DM Sans', sans-serif;

	--weight-regular:     400;   /* Body, navigation, captions */
	--weight-medium:      500;   /* Project titles, pillar names, subheadings */
	--weight-bold:        700;   /* All headlines, kinetic section, CTAs */

	/* Tracked-wide eyebrow style is applied at the component level, but the
	   tracking value is centralised here for consistency. */
	--tracking-eyebrow:   0.28em;
	--tracking-nav:       0.22em;
	--tracking-button:    0.24em;
	--tracking-label:     0.35em;


	/* ------------------------------------------------------------------------
	   SPACING SCALE
	   ------------------------------------------------------------------------
	   Use these tokens — never raw px values — for margin, padding, gap.
	   ------------------------------------------------------------------------ */

	--space-xs:            8px;
	--space-sm:           16px;
	--space-md:           32px;
	--space-lg:           48px;
	--space-xl:           64px;
	--space-xxl:          96px;


	/* ------------------------------------------------------------------------
	   LAYOUT
	   ------------------------------------------------------------------------
	   Container widths and global structural values.
	   ------------------------------------------------------------------------ */

	--container-max:      1440px;
	--container-padding:  var(--space-md);
	--nav-height:         72px;
	--hero-aspect:        41.84%;          /* 2.39 : 1 (cinematic) */


	/* ------------------------------------------------------------------------
	   MOTION
	   ------------------------------------------------------------------------
	   Standard easing curves and durations used across the theme.
	   ------------------------------------------------------------------------ */

	--ease-cinematic:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ease-default:       ease;
	--duration-fast:       0.2s;
	--duration-medium:     0.3s;
	--duration-slow:       0.6s;


	/* ------------------------------------------------------------------------
	   Z-INDEX SCALE
	   ------------------------------------------------------------------------ */

	--z-preloader:        9999;
	--z-nav:               100;
	--z-overlay:            50;
	--z-base:                1;
}