/* =================================================================
   File:    01-variables.css
   Purpose: ALL design tokens. Change any of these and the whole theme
            updates. No raw colors / sizes elsewhere — always use vars.

   Tokens organized as:
     1. Color (palette + semantic)
     2. Glass (the liquid-glass look)
     3. Spacing scale
     4. Radii + shadows
     5. Layout (container widths — 1600px page cap lives here)
     6. Typography
     7. Motion (durations + easings)
     8. Z-index scale
   ================================================================= */

:root {
	/* --- 1. Color: palette --- */
	--c-surface-0:  #EEF0F3;   /* cool showroom grey */
	--c-surface-1:  #FFFFFF;   /* product surface (keeps 1:1 white-bg images pristine) */
	--c-surface-2:  #E4E7EB;   /* sunken / soft panel */
	--c-ink:        #14181F;   /* primary text */
	--c-ink-muted:  #5A6172;   /* secondary text */
	--c-ink-soft:   #7D8492;   /* tertiary text */
	--c-line:       #D7DBE1;   /* hairline dividers */
	--c-accent:     #856533;   /* accessible dark brass primary */
	--c-accent-2:   #6F5229;   /* dark brass hover */
	--c-warm:       #B8924C;   /* warm brass */
	--c-success:    #2BAE66;
	--c-warning:    #E8A33A;
	--c-danger:     #D94545;

	/* --- 2. Glass tokens (the look) --- */
	--glass-bg:        rgba(255, 255, 255, 0.55);
	--glass-bg-strong: rgba(255, 255, 255, 0.72);
	--glass-bg-dark:   rgba(20, 24, 28, 0.40);
	--glass-tint:      rgba(244, 245, 247, 0.55);
	--glass-blur:      18px;
	--glass-blur-sm:   10px;
	--glass-blur-lg:   28px;
	--glass-border:    1px solid rgba(255, 255, 255, 0.65);
	--glass-border-soft: 1px solid rgba(255, 255, 255, 0.40);
	--glass-shadow:    0 8px 30px -6px rgba(15, 23, 42, 0.12),
	                   0 2px 6px -2px rgba(15, 23, 42, 0.08);
	--glass-shadow-lg: 0 18px 60px -10px rgba(15, 23, 42, 0.20),
	                   0 4px 12px -4px rgba(15, 23, 42, 0.10);
	/* Inner highlight that gives the "lens edge" feel */
	--glass-highlight: inset 1px 1px 0 rgba(255, 255, 255, 0.55),
	                   inset -1px -1px 0 rgba(0, 0, 0, 0.05);

	/* Page-flow background — soft Apple-style multi-hue field used as the
	   page canvas behind the WooCommerce flow pages (account, cart,
	   checkout). Single source of truth; applied via html:has() rules in
	   15-checkout.css + 16-account.css. */
	--page-flow-gradient:
		radial-gradient(75rem 62rem at 6% -14%,   color-mix(in oklab, var(--c-accent) 38%, transparent) 0%, transparent 60%),
		radial-gradient(66rem 60rem at 102% -4%,  color-mix(in oklab, #7C6FE0 30%, transparent) 0%, transparent 58%),
		radial-gradient(72rem 64rem at 98% 114%,  color-mix(in oklab, var(--c-warm) 40%, transparent) 0%, transparent 58%),
		radial-gradient(60rem 56rem at -10% 118%, color-mix(in oklab, var(--c-accent) 26%, transparent) 0%, transparent 58%),
		#EEF1F7;

	/* --- 3. Spacing scale (8px base) --- */
	--space-0:  0;
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  24px;
	--space-6:  32px;
	--space-7:  48px;
	--space-8:  64px;
	--space-9:  96px;
	--space-10: 128px;

	/* --- 4. Radii + shadows --- */
	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 22px;
	--radius-xl: 32px;
	--radius-pill: 999px;

	--shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 1px rgba(15, 23, 42, 0.04);
	--shadow-2: 0 4px 12px rgba(15, 23, 42, 0.08);
	--shadow-3: 0 12px 32px -8px rgba(15, 23, 42, 0.18);

	/* --- 5. Layout (LOCKED RULES) --- */
	--content-max: 1600px;          /* PAGE content cap */
	--gutter:      clamp(20px, 3vw, 56px);   /* page side padding */
	--fullbleed-padding: clamp(20px, 4vw, 56px); /* header/footer side padding */
	--header-height: 88px;
	--header-height-sm: 64px;
	--topbar-height: 36px;
	--mega-menu-max: 1600px;        /* mega menu inner content also caps at 1600 */

	/* --- 6. Typography --- */
	--ff-sans:   'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
	--ff-arabic: 'Cairo', 'IBM Plex Sans Arabic', var(--ff-sans);
	--ff-display: 'Fraunces', Georgia, serif;
	--ff-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

	--fs-xs:   clamp(0.75rem, 0.72rem + 0.1vw, 0.8rem);
	--fs-sm:   clamp(0.85rem, 0.83rem + 0.1vw, 0.9rem);
	--fs-base: clamp(0.95rem, 0.9rem + 0.2vw, 1rem);
	--fs-md:   clamp(1.05rem, 0.95rem + 0.3vw, 1.15rem);
	--fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
	--fs-xl:   clamp(1.6rem, 1.3rem + 1vw, 2.15rem);
	--fs-xxl:  clamp(2.2rem, 1.7rem + 1.8vw, 3.5rem);
	--fs-display: clamp(2.8rem, 2rem + 3vw, 4.75rem);

	--lh-tight: 1.15;
	--lh-snug:  1.3;
	--lh-base:  1.6;
	--lh-loose: 1.8;

	--fw-light:   300;
	--fw-regular: 400;
	--fw-medium:  500;
	--fw-semi:    600;
	--fw-bold:    700;

	/* --- 7. Motion --- */
	--dur-fast:  120ms;
	--dur:       240ms;
	--dur-slow:  280ms;
	--dur-page:  520ms;
	--ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
	--ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);

	/* --- 8. Z-index --- */
	--z-base:      1;
	--z-raised:    10;
	--z-sticky:    100;
	--z-header:    200;
	--z-drawer:    300;
	--z-modal:     400;
	--z-toast:     500;
	--z-tooltip:   600;
}

/* High-contrast / forced-colors mode — keep glass tokens readable. */
@media (forced-colors: active) {
	:root {
		--glass-bg: Canvas;
		--glass-bg-strong: Canvas;
		--glass-border: 1px solid CanvasText;
		--glass-shadow: none;
	}
}

/* Dark mode reserved for v0.2 — variable hooks live here for later. */
/* :root[data-theme="dark"] { ... } */