/* ==========================================================================
   Design Tokens — کلینیک زیبایی دکتر سیامک باقری
   Central source of truth for color, type, spacing & motion. Swapping the
   :root block (or adding a [dir="ltr"] override) is enough to re-theme
   or localize the site without touching component CSS.
   ========================================================================== */

:root {
	/* ---- Color palette ---------------------------------------------- */
	--color-bg: #0D0D0D;
	--color-bg-elevated: #141414;
	--color-bg-elevated-2: #1A1A1A;
	--color-gold: #C6A46C;
	--color-gold-light: #E7CE9F;
	--color-gold-dark: #8F7141;
	--color-white: #F7F7F7;
	--color-gray: #BDBDBD;
	--color-gray-dim: #8A8A8A;

	--color-success: #7FB88A;
	--color-error: #D98080;

	/* ---- Category accents (sidebar icons, stat cards) — theme-independent,
	   same reasoning as the appointments calendar's own hardcoded status
	   colors: these tag a *kind of thing*, not a UI surface, so they stay
	   constant across every theme.css preset. ---- */
	--color-info: #6FA8DC;
	--color-purple: #A78BFA;
	--color-teal: #5EC8B8;
	--color-rose: #E38FA5;

	/* ---- Glass / surfaces --------------------------------------------- */
	--glass-bg: rgba(247, 247, 247, 0.04);
	--glass-bg-strong: rgba(247, 247, 247, 0.06);
	--glass-border: rgba(198, 164, 108, 0.22);
	--glass-blur: 18px;

	/* ---- Gradients ------------------------------------------------- */
	--gradient-gold: linear-gradient(135deg, var(--color-gold-light) 0%, var(--color-gold) 50%, var(--color-gold-dark) 100%);
	--gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--color-bg) 100%);
	--gradient-radial-glow: radial-gradient(circle, rgba(198, 164, 108, 0.35) 0%, rgba(198, 164, 108, 0) 70%);

	/* ---- Typography -------------------------------------------------- */
	--font-body: 'Vazirmatn', sans-serif;
	--font-display: 'Vazirmatn', sans-serif;

	--fs-hero: clamp(2.75rem, 6vw, 5.5rem);
	--fs-h1: clamp(2.25rem, 4.2vw, 3.75rem);
	--fs-h2: clamp(1.75rem, 3vw, 2.75rem);
	--fs-h3: clamp(1.25rem, 1.6vw, 1.5rem);
	--fs-body-lg: clamp(1.05rem, 1.3vw, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xs: 0.75rem;

	/* ---- Spacing scale (8px base) ------------------------------------ */
	--space-1: 0.5rem;
	--space-2: 0.75rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4.5rem;
	--space-8: 6rem;
	--space-9: 9rem;

	--container-width: 1280px;
	--container-pad: clamp(1.25rem, 4vw, 3rem);

	/* ---- Radius & elevation ------------------------------------------ */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	--shadow-soft: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
	--shadow-gold: 0 10px 40px -12px rgba(198, 164, 108, 0.45);
	--shadow-inset-hairline: inset 0 1px 0 rgba(247, 247, 247, 0.06);

	/* ---- Motion -------------------------------------------------------- */
	--ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--dur-fast: 0.25s;
	--dur-mid: 0.5s;
	--dur-slow: 0.9s;

	--z-particles: 1;
	--z-content: 10;
	--z-nav: 100;
	--z-modal: 200;
	--z-loader: 300;
}