/* =========================================================================
   Ray Grafix — Site design tokens (namespace: rgx)
   One source of truth for the marketing site. Deliberately separate from the
   portal's token file: same brand family, louder register. Change the site
   globally from this file only — components must not hard-code values.

   Palette lineage: the portal lives in lavender #BCB4FF / gold-green #CAC426
   on warm charcoal. The site sharpens that family to full volume — electric
   purple (lavender is its light variant), acid lime (the gold-green, lit up),
   near-black ink on warm paper.
   ========================================================================= */

:root {
	/* --- Color: purple ------------------------------------------------- */
	--rgx-purple:        #7a2ff2;   /* electric — interactive, emphasis     */
	--rgx-purple-light:  #bcb4ff;   /* = portal lavender (brand continuity) */
	--rgx-purple-dark:   #4a1ecc;   /* pressed / dark-surface accent        */
	--rgx-purple-deep:   #5b21d6;   /* accessible purple text on paper      */
	--rgx-purple-soft:   rgba(122, 47, 242, 0.10);

	/* --- Color: lime ---------------------------------------------------- */
	--rgx-lime:          #cff226;   /* acid highlight — marks, pills, moments */
	--rgx-lime-soft:     #eff9c4;
	--rgx-on-lime:       #131405;   /* text set on a lime fill              */

	/* --- Color: ink & paper --------------------------------------------- */
	--rgx-black:         #0e0e10;   /* ink + dark sections                  */
	--rgx-black-soft:    #1a1a1d;   /* raised dark surface                  */
	--rgx-white:         #ffffff;
	--rgx-paper:         #faf8f1;   /* warm off-white canvas                */
	--rgx-paper-2:       #f3f0e6;   /* tinted panel on paper                */
	--rgx-gray:          #6e6b63;   /* secondary text on paper              */
	--rgx-gray-dark:     #a5a29a;   /* secondary text on black             */

	/* --- Lines ---------------------------------------------------------- */
	--rgx-line:          rgba(14, 14, 16, 0.14);
	--rgx-line-strong:   rgba(14, 14, 16, 0.32);
	--rgx-line-inverse:  rgba(255, 255, 255, 0.16);

	/* --- Typography ------------------------------------------------------ */
	--rgx-font-display:  "Archivo", "Archivo Fallback", Impact, sans-serif;
	--rgx-font-body:     "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Archivo variable width axis: display voice is wide + heavy */
	--rgx-display-stretch: 120%;

	/* Fluid scale (mobile-first: floors at 360, peaks ~1440) */
	--rgx-text-hero:  clamp(1.65rem, 0.05rem + 8.05vw, 7rem);    /* measured: longest line ~10.9em; fits 320 to 1440 */
	--rgx-text-d1:    clamp(2.4rem, 1.2rem + 5.4vw, 5.6rem);     /* section display */
	--rgx-text-d2:    clamp(1.9rem, 1.15rem + 3.2vw, 3.5rem);
	--rgx-text-h3:    clamp(1.3rem, 1.05rem + 1.1vw, 1.8rem);
	--rgx-text-lead:  clamp(1.12rem, 1rem + 0.55vw, 1.4rem);
	--rgx-text-body:  1.0625rem;
	--rgx-text-sm:    0.9375rem;
	--rgx-text-label: 0.8125rem;

	--rgx-leading-flat:  0.94;      /* stacked display lines                */
	--rgx-leading-tight: 1.08;
	--rgx-leading-body:  1.7;

	--rgx-track-display: -0.028em;
	--rgx-track-label:   0.14em;

	--rgx-weight-body:     440;     /* DM Sans variable                     */
	--rgx-weight-medium:   560;
	--rgx-weight-bold:     700;
	--rgx-weight-display:  740;     /* Archivo variable                     */
	--rgx-weight-black:    860;

	/* --- Space ----------------------------------------------------------- */
	--rgx-s1: 0.25rem;  --rgx-s2: 0.5rem;   --rgx-s3: 0.75rem;
	--rgx-s4: 1rem;     --rgx-s5: 1.5rem;   --rgx-s6: 2rem;
	--rgx-s7: 3rem;     --rgx-s8: 4.5rem;   --rgx-s9: 7rem;
	--rgx-section:  clamp(4.5rem, 3rem + 8vw, 10rem);   /* vertical rhythm  */
	--rgx-gutter:   clamp(1.25rem, 4.5vw, 4rem);
	--rgx-shell:    1360px;
	--rgx-measure:  62ch;

	/* --- Shape ----------------------------------------------------------- */
	--rgx-radius:      0px;         /* editorial: square by default         */
	--rgx-radius-sm:   6px;
	--rgx-radius-pill: 999px;

	/* --- Shadow (used sparingly; the site is mostly flat) ---------------- */
	--rgx-shadow-lift: 0 18px 60px rgba(14, 14, 16, 0.16);

	/* --- Motion ----------------------------------------------------------- */
	--rgx-ease:      cubic-bezier(0.22, 1, 0.36, 1);
	--rgx-ease-io:   cubic-bezier(0.65, 0.05, 0.36, 1);
	--rgx-dur-fast:  0.22s;
	--rgx-dur:       0.55s;
	--rgx-dur-slow:  1s;

	/* --- Layers ----------------------------------------------------------- */
	--rgx-z-nav:     200;
	--rgx-z-menu:    300;
	--rgx-z-toast:   400;

	/* The marketing site is a light canvas with dark passages. */
	color-scheme: light;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--rgx-dur-fast: 0.001s;
		--rgx-dur:      0.001s;
		--rgx-dur-slow: 0.001s;
	}
}