/* ==========================================================================
   Ray Grafix — Global Design Tokens
   One source of truth for colour, type, space, motion. Enqueued by both the
   theme and the portal plugin so every surface (site, onboarding, login,
   client portal, admin, legal) shares the same system.

   Palette direction (from the supplied reference):
     Deep Charcoal  #222223  — primary canvas + dark surfaces
     Lavender       #BCB4FF  — primary accent: interactive, progress, focus
     Apricot White  #FFFEEC  — warm light surfaces, cards, contrast sections
     Gold-Green     #CAC426  — secondary accent, used sparingly for highlights
                               and special status moments only

   Restraint is deliberate: charcoal + one confident accent (lavender), warm
   cream for light moments, gold-green as a rare punctuation. Never all four at
   equal weight — the result should read premium and warm, not colourful.
   NOTE: exact hexes to be re-sampled from the reference image if re-supplied;
   these are the stated values, refined into a full scale.
   ========================================================================== */

:root {
	/* Force dark UA rendering everywhere (form controls, scrollbars) so no
	   light theme ever shows through, regardless of the device preference. */
	color-scheme: dark;

	/* --- Raw palette ------------------------------------------------------ */
	--rg-charcoal:        #222223;
	--rg-apricot:         #fffeec;
	--rg-lavender:        #bcb4ff;
	--rg-goldgreen:       #cac426;

	/* --- Charcoal scale (canvas + elevation) ----------------------------- */
	--rg-bg:              #191a1b;  /* deepest — page background            */
	--rg-surface:         #222223;  /* base charcoal surface               */
	--rg-surface-2:       #2b2b2d;  /* raised cards/panels on dark         */
	--rg-surface-3:       #343437;  /* hover / active dark surface         */

	/* --- Apricot scale (warm light surfaces) ----------------------------- */
	--rg-light:           #fffeec;  /* primary light surface / cream card  */
	--rg-light-2:         #f7f4e2;  /* subtle warm hover on light          */
	--rg-light-3:         #ece8d4;  /* light borders / dividers            */

	/* --- Ink (text) ------------------------------------------------------ */
	--rg-ink:             #f6f4e6;  /* primary text on dark (apricot-tint) */
	--rg-ink-dim:         #cfccbe;  /* secondary text on dark              */
	--rg-muted:           #9a978c;  /* tertiary / meta text on dark        */
	--rg-faint:           #6c6a62;  /* disabled / hint text on dark        */
	--rg-ink-on-light:    #222223;  /* text on apricot/light surfaces      */
	--rg-muted-on-light:  #5f5d54;  /* secondary text on light             */

	/* --- Accent: Lavender ------------------------------------------------ */
	--rg-accent:          #bcb4ff;
	--rg-accent-hover:    #cfc9ff;
	--rg-accent-active:   #a79dff;
	--rg-accent-strong:   #8f83f5;  /* for text/icon on light backgrounds  */
	--rg-accent-soft:     rgba(188,180,255,0.14);  /* tint fills           */
	--rg-accent-line:     rgba(188,180,255,0.30);
	--rg-on-accent:       #201a3d;  /* text on a lavender fill (dark)      */

	/* --- Secondary accent: Gold-Green (use sparingly) -------------------- */
	--rg-gold:            #cac426;
	--rg-gold-deep:       #b0aa1c;  /* readable gold on light              */
	--rg-gold-soft:       rgba(202,196,38,0.15);
	--rg-on-gold:         #201f07;

	/* --- Lines --------------------------------------------------------- */
	--rg-line:            rgba(255,255,255,0.09);
	--rg-line-strong:     rgba(255,255,255,0.16);

	/* --- Status (ALWAYS paired with an icon + label, never colour alone) - */
	--rg-success:         #9bd07a;  /* leans into the gold-green family     */
	--rg-success-soft:    rgba(155,208,122,0.16);
	--rg-info:            #bcb4ff;  /* lavender = in progress               */
	--rg-info-soft:       rgba(188,180,255,0.16);
	--rg-warning:         #e6c15a;
	--rg-warning-soft:    rgba(230,193,90,0.16);
	--rg-danger:          #ec7a86;
	--rg-danger-soft:     rgba(236,122,134,0.16);

	/* --- Typography ------------------------------------------------------ */
	--rg-font-display:    "Clash Display", "Satoshi", system-ui, sans-serif;
	--rg-font-body:       "Satoshi", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--rg-font-serif:      "Newsreader", Georgia, "Times New Roman", serif; /* rare italic accents */
	--rg-font-mono:       ui-monospace, "SF Mono", "SFMono-Regular", Menlo, monospace;

	--rg-weight-regular:  400;
	--rg-weight-medium:   500;
	--rg-weight-semibold: 600;
	--rg-weight-bold:     700;

	/* Fluid type scale (mobile-first: min at 320, max at ~1280) */
	--rg-text-xs:   0.75rem;                            /* 12 */
	--rg-text-sm:   0.8125rem;                          /* 13 */
	--rg-text-base: 0.9375rem;                          /* 15 */
	--rg-text-md:   1rem;                               /* 16 */
	--rg-text-lg:   clamp(1.0625rem, 0.9rem + 0.7vw, 1.25rem);
	--rg-text-xl:   clamp(1.25rem, 1rem + 1.1vw, 1.6rem);
	--rg-display-3: clamp(1.6rem, 1.2rem + 2vw, 2.4rem);
	--rg-display-2: clamp(2rem, 1.4rem + 3vw, 3.2rem);
	--rg-display-1: clamp(2.4rem, 1.5rem + 4.4vw, 4.2rem);

	--rg-leading-tight: 1.12;
	--rg-leading-snug:  1.35;
	--rg-leading-body:  1.6;
	--rg-tracking-tight: -0.02em;
	--rg-tracking-wide:  0.08em;

	/* --- Spacing (4px base) --------------------------------------------- */
	--rg-space-1:  0.25rem;
	--rg-space-2:  0.5rem;
	--rg-space-3:  0.75rem;
	--rg-space-4:  1rem;
	--rg-space-5:  1.5rem;
	--rg-space-6:  2rem;
	--rg-space-7:  3rem;
	--rg-space-8:  4rem;
	--rg-space-9:  6rem;
	--rg-gutter:   clamp(1.25rem, 4vw, 3rem);
	--rg-shell:    1200px;      /* max content width */
	--rg-shell-narrow: 720px;   /* forms / reading   */

	/* --- Radius ---------------------------------------------------------- */
	--rg-radius-sm:  8px;
	--rg-radius:     14px;
	--rg-radius-lg:  20px;
	--rg-radius-xl:  28px;
	--rg-radius-pill: 999px;

	/* --- Shadows (warm-tinted, soft) ------------------------------------- */
	--rg-shadow-sm:  0 1px 2px rgba(0,0,0,0.25);
	--rg-shadow:     0 8px 24px rgba(0,0,0,0.30);
	--rg-shadow-lg:  0 20px 50px rgba(0,0,0,0.40);
	--rg-shadow-accent: 0 10px 40px rgba(188,180,255,0.18);

	/* --- Focus ----------------------------------------------------------- */
	--rg-focus-ring: 0 0 0 3px rgba(188,180,255,0.55);
	--rg-focus-offset: 2px;

	/* --- Motion ---------------------------------------------------------- */
	--rg-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
	--rg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--rg-dur-fast:    0.14s;
	--rg-dur:         0.28s;
	--rg-dur-slow:    0.5s;

	/* --- Breakpoints (reference; used in media queries, not directly) ---- */
	--rg-bp-sm:  375px;
	--rg-bp-md:  768px;
	--rg-bp-lg:  1024px;
	--rg-bp-xl:  1280px;

	/* --- Z-index scale --------------------------------------------------- */
	--rg-z-base:      1;
	--rg-z-sticky:    100;
	--rg-z-header:    200;
	--rg-z-drawer:    300;
	--rg-z-overlay:   400;
	--rg-z-modal:     500;
	--rg-z-toast:     600;
}

/* Respect reduced motion globally at the token layer. */
@media (prefers-reduced-motion: reduce) {
	:root {
		--rg-dur-fast: 0.001s;
		--rg-dur:      0.001s;
		--rg-dur-slow: 0.001s;
	}
}