/**
 * SkyyRose Design Tokens
 *
 * Canonical design token file referenced by the enqueue system.
 * Imports brand variables and adds layout, component, and semantic tokens.
 *
 * @package SkyyRose_Flagship
 * @since   3.0.0
 */

:root {
	/* -----------------------------------------------
	   Layout
	   ----------------------------------------------- */
	--header-height: 72px;
	--tab-bar-height: 48px;
	--sidebar-width: 280px;
	--container-content: 1200px;
	--container-wide: 1400px;
	--container-narrow: 800px;

	/* -----------------------------------------------
	   Semantic Colors (map to brand-variables)
	   ----------------------------------------------- */
	--color-page-bg: #0A0A0A;
	--color-card-bg: #111111;
	--color-card-bg-hover: #161616;
	--color-border: #2A2A2A;
	--color-border-hover: rgba(183, 110, 121, 0.3);
	--color-text-primary: #FFFFFF;
	--color-text-secondary: #CCCCCC;
	--color-text-muted: #999999;
	--color-text-dim: #666666;
	--color-rose-gold: var(--rose-gold, #B76E79);
	--color-gold: var(--gold, #D4AF37);
	--color-crimson: var(--crimson, #DC143C);
	--color-silver: var(--silver, #C0C0C0);
	--color-white: var(--white, #FFFFFF);
	--color-black: var(--black, #000000);
	--color-red: #FF0000;

	/* -----------------------------------------------
	   Glass Effects
	   ----------------------------------------------- */
	--glass-bg: rgba(17, 17, 17, 0.92);
	--glass-bg-dark: rgba(10, 10, 10, 0.98);
	--glass-border: 1px solid rgba(255, 255, 255, 0.06);
	--glass-blur: blur(24px) saturate(1.4);

	/* -----------------------------------------------
	   Typography — Line Heights
	   ----------------------------------------------- */
	--leading-tight: 1.15;
	--leading-snug: 1.3;
	--leading-normal: 1.6;
	--leading-relaxed: 1.75;

	/* -----------------------------------------------
	   Typography — Letter Spacing
	   ----------------------------------------------- */
	--tracking-tighter: -0.05em;
	--tracking-tight: -0.025em;
	--tracking-normal: 0;
	--tracking-wide: 0.05em;
	--tracking-wider: 0.1em;
	--tracking-widest: 0.2em;

	/* -----------------------------------------------
	   Typography — Extra font size
	   ----------------------------------------------- */
	--text-5xl: clamp(2.75rem, 2.3rem + 2.25vw, 4.5rem);

	/* -----------------------------------------------
	   Shadows — Glow variants
	   ----------------------------------------------- */
	--shadow-crimson-glow: 0 0 20px rgba(220, 20, 60, 0.3);
	--shadow-silver-glow: 0 0 20px rgba(192, 192, 192, 0.3);

	/* -----------------------------------------------
	   Gradients — Logo
	   ----------------------------------------------- */
	--gradient-logo: linear-gradient(135deg, #B76E79 0%, #D4AF37 50%, #C0C0C0 100%);
	--gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);

	/* -----------------------------------------------
	   Transitions
	   ----------------------------------------------- */
	--transition-smooth: all 0.3s ease;
	--transition-spring: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);

	/* -----------------------------------------------
	   Interactive States
	   ----------------------------------------------- */
	--focus-ring: 0 0 0 2px var(--color-rose-gold, #B76E79);
	--hover-lift: translateY(-2px);
	--active-press: scale(0.97);

	/* -----------------------------------------------
	   Z-Index — Additional layers
	   ----------------------------------------------- */
	--z-sticky: 200;
	--z-overlay: 400;
	--z-tooltip: 600;
	--z-modal: 800;
	--z-cursor: 9999;
}