/*
 * Design tokens — single source of truth for the Shoootlifestyle
 * design system. Every other stylesheet consumes these custom
 * properties rather than hardcoding values.
 *
 * ---- Light / dark theme ----
 * :root holds the light palette ("Luxury/Y2K": off-white/cream bg,
 * pure-white cards, deep charcoal text, a deep rich accent for CTAs).
 * The dark palette ("Hype/Tech": charcoal/black bg, matte-black cards,
 * clean white text, a bright neon accent for CTAs) is layered on top
 * twice: once behind a prefers-color-scheme query (so a first-time
 * visitor gets their OS preference for free) and once behind an
 * explicit [data-theme="dark"] attribute set by the header toggle
 * (assets/js/theme-toggle.js) so a manual choice always wins over the
 * system setting, in either direction. Never define a color token only
 * inside one of those blocks — always give it a light default on bare
 * :root first.
 */

:root {
	/* ---- Color: light theme ("Luxury/Y2K") ---- */
	--color-bg: #f5f5f5;
	--color-bg-alt: #f5f5f5;
	--color-ink: #171717;
	--color-ink-muted: #6B6B68;
	--color-ink-faint: #A8A6A0;
	--color-border: #E0E0E0;
	--color-border-strong: #CCCCCC;
	--color-surface: #FFFFFF;

	/* Structural "solid fill" chrome — footer, announcement bar, active
	   filter/swatch states, badges. Stays a dark ink tone in BOTH
	   themes (identical to --color-ink here in light mode) so these
	   elements don't need their own light/dark redesign; only their
	   paired white text/border tint needs to keep working, which it
	   already does since this token stays dark in dark mode too. */
	--color-ink-solid: #171717;

	/* Genuine purchase CTAs (Add to Cart, Proceed to Checkout, Place
	   Order) — the one place the reference guide's "CTAs / Drops" row
	   applies. Light mode keeps the site's existing black-default,
	   accent-on-hover treatment; dark mode switches the accent role
	   the guide describes ("Bright Accent Neon/Red"). */
	--color-cta-bg: #171717;
	--color-cta-text: #FFFFFF;
	--color-cta-hover-bg: #E53935;

	/* Frosted-glass header background (sits over scrolling content, so
	   it needs its own theme-aware translucent tone rather than a
	   flat surface color). */
	--color-header-bg: rgba(245, 245, 245, 0.94);
	--color-header-bg-stuck: rgba(245, 245, 245, 0.98);

	--color-accent: #E53935;
	--color-accent-dark: #C62828;
	--color-accent-ink: #FFFFFF;
	--color-accent-tint: #FEE8E8;

	--color-success: #2F7D4F;
	--color-success-tint: #E9F4ED;
	--color-error: #D64545;
	--color-error-tint: #FBE9E9;

	/* Lets native form controls, scrollbars, etc. follow the theme. */
	color-scheme: light;

	/* ---- Typography ---- */
	--font-display: 'Yeseva One', 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--fs-xs: clamp(0.72rem, 0.69rem + 0.14vw, 0.8rem);
	--fs-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.9rem);
	--fs-base: clamp(0.95rem, 0.92rem + 0.14vw, 1rem);
	--fs-md: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	--fs-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
	--fs-xl: clamp(1.4rem, 1.25rem + 0.6vw, 1.75rem);
	--fs-2xl: clamp(1.7rem, 1.45rem + 1vw, 2.25rem);
	--fs-3xl: clamp(2.1rem, 1.7rem + 1.6vw, 3rem);
	--fs-4xl: clamp(2.6rem, 2rem + 2.4vw, 3.9rem);
	--fs-5xl: clamp(3.2rem, 2.3rem + 3.6vw, 5rem);

	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-normal: 1.55;
	--lh-relaxed: 1.75;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---- Spacing scale (4px base) ---- */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-8: 3rem;      /* 48px */
	--space-10: 4rem;     /* 64px */
	--space-12: 6rem;     /* 96px */
	--space-16: 8rem;     /* 128px */

	/* ---- Radius ---- */
	--radius-sm: 4px;
	--radius-md: 10px;
	--radius-lg: 16px;
	--radius-full: 999px;

	/* ---- Shadow ---- */
	--shadow-sm: 0 1px 2px rgba(23, 23, 23, 0.06), 0 1px 1px rgba(23, 23, 23, 0.04);
	--shadow-md: 0 12px 24px -8px rgba(23, 23, 23, 0.16), 0 4px 8px -2px rgba(23, 23, 23, 0.08);
	--shadow-focus: 0 0 0 3px var(--color-accent-tint);

	/* ---- Layout ---- */
	--container-max: 100%;
	--container-padding: clamp(1.25rem, 2vw + 0.5rem, 3rem);
	--header-height: 76px;
	--topbar-height: 40px;

	/* ---- Motion ---- */
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
}

/* ---- Color: dark theme ("Hype/Tech"), explicit toggle ----
 * The header's dark/light button sets this attribute on <html> and
 * persists the choice to localStorage (assets/js/theme-toggle.js).
 * Repeating the full dark block here — rather than relying on the
 * prefers-color-scheme query alone — is what lets the toggle override
 * the OS setting in both directions. */
:root[data-theme="dark"] {
	--color-bg: #141210;
	--color-bg-alt: #1B1815;
	--color-ink: #F5F3EF;
	--color-ink-muted: #B8B4AC;
	--color-ink-faint: #7A776E;
	--color-border: #2E2B24;
	--color-border-strong: #3D3A31;
	--color-surface: #1C1A16;

	--color-ink-solid: #201D18;

	--color-cta-bg: #E53935;
	--color-cta-text: #FFFFFF;
	--color-cta-hover-bg: #C62828;

	--color-header-bg: rgba(20, 18, 16, 0.7);
	--color-header-bg-stuck: rgba(20, 18, 16, 0.78);

	--color-accent: #E53935;
	--color-accent-dark: #C62828;
	--color-accent-ink: #FFFFFF;
	--color-accent-tint: rgba(229, 57, 53, 0.2);

	--color-success: #4CAF6D;
	--color-success-tint: #1C3324;
	--color-error: #FF6B6B;
	--color-error-tint: #3A1E1E;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
	--shadow-md: 0 12px 24px -8px rgba(0, 0, 0, 0.55), 0 4px 8px -2px rgba(0, 0, 0, 0.35);

	color-scheme: dark;
}