/*
 * MOP Design Tokens
 * Estratti da BRAND_GUIDELINES.md
 */

:root {
	/* ═══════════════════════════════════════════════════════════
		 COLORS
		 ═══════════════════════════════════════════════════════════ */

	/* Primary */
	--color-marble-black: #0F172A;
	/* slate-900 */
	--color-bronze-copper: #2563EB;
	/* blue-600 */
	--color-warm-white: #F8FAFC;
	/* slate-50 */

	/* Secondary */
	--color-marble-vein: #334155;
	/* slate-700 */
	--color-deep-charcoal: #1E293B;
	/* slate-800 */
	--color-chrome-silver: #94A3B8;
	/* slate-400 */
	--color-string-gold: #60A5FA;
	/* blue-400 */

	/* Functional */
	--color-success: #10B981;
	/* emerald-500 */
	--color-warning: #F59E0B;
	/* amber-500 */
	--color-error: #EF4444;
	/* red-500 */
	--color-info: #3B82F6;
	/* blue-500 */

	/* Semantic */
	--color-bg-primary: var(--color-marble-black);
	--color-bg-secondary: var(--color-deep-charcoal);
	--color-bg-elevated: #1E293B;
	/* slate-800 from deep charcoal */
	--color-text-primary: var(--color-warm-white);
	--color-text-secondary: var(--color-chrome-silver);
	--color-text-accent: var(--color-bronze-copper);
	--color-border: rgba(255, 255, 255, 0.1);
	--color-border-accent: var(--color-bronze-copper);

	/* ═══════════════════════════════════════════════════════════
		 TYPOGRAPHY
		 ═══════════════════════════════════════════════════════════ */

	--font-display: "Bebas Neue", "Impact", sans-serif;
	--font-heading: "Space Grotesk", "Arial", sans-serif;
	--font-body: "Inter", "Helvetica Neue", sans-serif;
	--font-mono: "JetBrains Mono", "Fira Code", monospace;

	/* Font Sizes */
	--text-xs: 0.75rem;
	/* 12px */
	--text-sm: 0.875rem;
	/* 14px */
	--text-base: 1rem;
	/* 16px */
	--text-lg: 1.25rem;
	/* 20px */
	--text-xl: 1.5rem;
	/* 24px */
	--text-2xl: 2rem;
	/* 32px */
	--text-3xl: 2.5rem;
	/* 40px */
	--text-4xl: 3.5rem;
	/* 56px */
	--text-5xl: 4.5rem;
	/* 72px */
	--text-6xl: 6rem;
	/* 96px */

	/* ═══════════════════════════════════════════════════════════
		 SPACING
		 ═══════════════════════════════════════════════════════════ */

	--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 */

	/* ═══════════════════════════════════════════════════════════
		 BORDERS & RADIUS
		 ═══════════════════════════════════════════════════════════ */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 16px;
	--radius-full: 9999px;

	--border-width: 1px;
	--border-width-thick: 2px;

	/* ═══════════════════════════════════════════════════════════
		 SHADOWS
		 ═══════════════════════════════════════════════════════════ */

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
	--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);

	/* Glow effects */
	--glow-copper: 0 0 20px rgba(37, 99, 235, 0.3);
	--glow-copper-strong: 0 0 40px rgba(37, 99, 235, 0.5);

	/* ═══════════════════════════════════════════════════════════
		 TRANSITIONS
		 ═══════════════════════════════════════════════════════════ */

	--duration-fast: 150ms;
	--duration-normal: 300ms;
	--duration-slow: 500ms;
	--duration-slower: 800ms;

	--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-in: cubic-bezier(0.4, 0, 1, 1);
	--ease-out: cubic-bezier(0, 0, 0.2, 1);
	--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

	/* ═══════════════════════════════════════════════════════════
		 Z-INDEX
		 ═══════════════════════════════════════════════════════════ */

	--z-base: 0;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-fixed: 300;
	--z-modal-backdrop: 400;
	--z-modal: 500;
	--z-tooltip: 600;

	/* ═══════════════════════════════════════════════════════════
		 LAYOUT
		 ═══════════════════════════════════════════════════════════ */

	--container-sm: 640px;
	--container-md: 768px;
	--container-lg: 1024px;
	--container-xl: 1280px;
	--container-2xl: 1440px;
	--container-full: 1920px;

	--navbar-height: 80px;
	--navbar-height-mobile: 64px;
}