/**
 * Noxora Design Tokens — Centralized Design System
 * Shared across all modules (Pro, Tube, Story, Community, Discover)
 * 
 * Token Categories:
 * - Colors (primary, secondary, accents, neutrals, semantic)
 * - Spacing (scale, component-specific)
 * - Typography (sizes, weights, line-heights, letter-spacing)
 * - Radius (corners, pills)
 * - Shadows (elevation, depth)
 * - Transitions (durations, easings)
 * - Glass (blur, backgrounds, borders)
 * - Gradients (linear, radial)
 * - Z-index (layering)
 * 
 * @package Noxora\DesignSystem
 */

:root {
	/* ─────────────────────────────────────────────
	   COLORS
	   ───────────────────────────────────────────── */
	
	/* Primary - Luxury Gold */
	--nx-gold: #d4af37;
	--nx-gold-50: #f4d675;
	--nx-gold-100: #e8c658;
	--nx-gold-200: #d4af37;
	--nx-gold-300: #b8942e;
	--nx-gold-400: #9a7a26;
	--nx-gold-500: #7c631f;
	--nx-gold-soft: rgba(212, 175, 55, 0.14);
	--nx-gold-soft-50: rgba(212, 175, 55, 0.08);
	--nx-gold-soft-100: rgba(212, 175, 55, 0.14);
	--nx-gold-soft-200: rgba(212, 175, 55, 0.22);
	--nx-gold-line: rgba(212, 175, 55, 0.32);
	--nx-gold-glow: rgba(212, 175, 55, 0.35);
	--nx-gold-glow-strong: rgba(212, 175, 55, 0.5);
	
	/* Secondary - Graphite/Dark */
	--nx-graphite: #1a1a1e;
	--nx-graphite-50: #2a2a30;
	--nx-graphite-100: #3a3a40;
	--nx-graphite-200: #4a4a50;
	--nx-graphite-300: #5a5a60;
	
	/* Neutrals */
	--nx-white: #f8f6ef;
	--nx-white-50: #f0ede3;
	--nx-white-100: #e8e4d7;
	--nx-white-200: #d0cbb8;
	--nx-muted: #888888;
	--nx-muted-50: #999999;
	--nx-muted-100: #777777;
	--nx-muted-200: #555555;
	
	/* Backgrounds */
	--nx-bg-main: #08080a;
	--nx-bg-elevated: #0c0c10;
	--nx-bg-card: rgba(18, 18, 24, 0.6);
	--nx-bg-card-strong: rgba(14, 14, 17, 0.82);
	--nx-bg-glass: rgba(18, 18, 20, 0.65);
	--nx-bg-glass-strong: rgba(14, 14, 17, 0.82);
	
	/* Module Accents */
	--nx-accent-pro: #d4af37; /* Gold */
	--nx-accent-tube: #ff4757; /* Soft Red */
	--nx-accent-story: #ff6b9d; /* Pink */
	--nx-accent-community: #8a2be2; /* Blue-Violet */
	--nx-accent-discover: #00f0ff; /* Cyan */
	
	/* Semantic */
	--nx-success: #2ecc71;
	--nx-warning: #f39c12;
	--nx-danger: #e74c3c;
	--nx-info: #3498db;
	
	/* ─────────────────────────────────────────────
	   SPACING SCALE (8px base)
	   ───────────────────────────────────────────── */
	--nx-space-0: 0;
	--nx-space-1: 0.25rem;  /* 4px */
	--nx-space-2: 0.5rem;   /* 8px */
	--nx-space-3: 0.75rem;  /* 12px */
	--nx-space-4: 1rem;     /* 16px */
	--nx-space-5: 1.25rem;  /* 20px */
	--nx-space-6: 1.5rem;   /* 24px */
	--nx-space-8: 2rem;     /* 32px */
	--nx-space-10: 2.5rem;  /* 40px */
	--nx-space-12: 3rem;    /* 48px */
	--nx-space-16: 4rem;    /* 64px */
	--nx-space-20: 5rem;    /* 80px */
	--nx-space-24: 6rem;    /* 96px */
	
	/* Component-specific */
	--nx-gap-xs: 0.35rem;
	--nx-gap-sm: 0.5rem;
	--nx-gap-md: 0.85rem;
	--nx-gap-lg: 1.25rem;
	--nx-gap-xl: 1.5rem;
	
	/* ─────────────────────────────────────────────
	   TYPOGRAPHY
	   ───────────────────────────────────────────── */
	
	/* Font Families */
	--nx-font-sans: "Inter", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
	--nx-font-mono: "JetBrains Mono", "Fira Code", monospace;
	
	/* Font Sizes (fluid) */
	--nx-fs-xs: clamp(0.75rem, 1.4vw, 0.8125rem);
	--nx-fs-sm: clamp(0.8125rem, 1.6vw, 0.875rem);
	--nx-fs-base: clamp(0.95rem, 1.8vw, 1rem);
	--nx-fs-md: clamp(1.05rem, 2vw, 1.125rem);
	--nx-fs-lg: clamp(1.15rem, 2.5vw, 1.25rem);
	--nx-fs-xl: clamp(1.25rem, 3vw, 1.5rem);
	--nx-fs-2xl: clamp(1.5rem, 4vw, 1.75rem);
	--nx-fs-3xl: clamp(1.75rem, 5vw, 2.25rem);
	--nx-fs-4xl: clamp(2rem, 6vw, 3rem);
	--nx-fs-5xl: clamp(2.5rem, 6.5vw, 4rem);
	--nx-fs-6xl: clamp(3rem, 7vw, 4.5rem);
	
	/* Font Weights */
	--nx-fw-normal: 400;
	--nx-fw-medium: 500;
	--nx-fw-semibold: 600;
	--nx-fw-bold: 700;
	--nx-fw-extrabold: 800;
	
	/* Line Heights */
	--nx-lh-tight: 1.1;
	--nx-lh-snug: 1.25;
	--nx-lh-normal: 1.5;
	--nx-lh-relaxed: 1.65;
	--nx-lh-loose: 1.8;
	
	/* Letter Spacing */
	--nx-ls-tight: -0.03em;
	--nx-ls-normal: 0;
	--nx-ls-wide: 0.02em;
	--nx-ls-wider: 0.05em;
	--nx-ls-widest: 0.1em;
	
	/* ─────────────────────────────────────────────
	   RADIUS
	   ───────────────────────────────────────────── */
	--nx-radius-none: 0;
	--nx-radius-sm: 8px;
	--nx-radius-md: 12px;
	--nx-radius-lg: 16px;
	--nx-radius-xl: 18px;
	--nx-radius-2xl: 22px;
	--nx-radius-3xl: 28px;
	--nx-radius-full: 9999px;
	
	/* ─────────────────────────────────────────────
	   SHADOWS
	   ───────────────────────────────────────────── */
	--nx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
	--nx-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
	--nx-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35);
	--nx-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.45);
	--nx-shadow-2xl: 0 24px 60px rgba(0, 0, 0, 0.55);
	--nx-shadow-gold: 0 18px 48px rgba(212, 175, 55, 0.18);
	--nx-shadow-gold-strong: 0 24px 60px rgba(212, 175, 55, 0.3);
	--nx-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	--nx-shadow-inset-gold: inset 0 1px 0 rgba(212, 175, 55, 0.12);
	
	/* ─────────────────────────────────────────────
	   TRANSITIONS
	   ───────────────────────────────────────────── */
	--nx-duration-fast: 0.15s;
	--nx-duration-base: 0.25s;
	--nx-duration-slow: 0.35s;
	--nx-duration-slower: 0.5s;
	
	--nx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--nx-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
	--nx-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
	
	/* ─────────────────────────────────────────────
	   GLASS
	   ───────────────────────────────────────────── */
	--nx-glass-blur: 12px;
	--nx-glass-blur-strong: 22px;
	--nx-glass-blur-stronger: 30px;
	--nx-glass-bg: rgba(18, 18, 24, 0.6);
	--nx-glass-bg-strong: rgba(14, 14, 17, 0.82);
	--nx-glass-border: rgba(255, 255, 255, 0.06);
	--nx-glass-border-strong: rgba(255, 255, 255, 0.08);
	
	/* ─────────────────────────────────────────────
	   GRADIENTS
	   ───────────────────────────────────────────── */
	--nx-grad-gold: linear-gradient(135deg, #f4d675 0%, #d4af37 45%, #b8942e 100%);
	--nx-grad-gold-soft: linear-gradient(135deg, rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0.06));
	--nx-grad-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
	--nx-grad-dark: linear-gradient(180deg, #0c0c10, #0a0a0e);
	
	/* ─────────────────────────────────────────────
	   Z-INDEX
	   ───────────────────────────────────────────── */
	--nx-z-dropdown: 100;
	--nx-z-sticky: 200;
	--nx-z-header: 300;
	--nx-z-modal: 400;
	--nx-z-popover: 500;
	--nx-z-tooltip: 600;
	--nx-z-notification: 700;
	--nx-z-overlay: 800;
	--nx-z-max: 9999;
	
	/* ─────────────────────────────────────────────
	   MODULE-SPECIFIC TOKENS
	   ───────────────────────────────────────────── */
	
	/* Pro Module */
	--nx-pro-accent: var(--nx-accent-pro);
	--nx-pro-bg: var(--nx-bg-main);
	--nx-pro-glass: var(--nx-glass-bg);
	--nx-pro-glass-blur: var(--nx-glass-blur-strong);
	
	/* Tube Module */
	--nx-tube-accent: var(--nx-accent-tube);
	--nx-tube-bg: #0a0a0e;
	--nx-tube-glass: rgba(20, 10, 15, 0.65);
	
	/* Story Module */
	--nx-story-accent: var(--nx-accent-story);
	--nx-story-bg: #0f0a0e;
	--nx-story-glass: rgba(20, 10, 15, 0.65);
	
	/* Community Module */
	--nx-community-accent: var(--nx-accent-community);
	--nx-community-bg: #0e0a14;
	--nx-community-glass: rgba(15, 10, 20, 0.65);
	
	/* Discover Module */
	--nx-discover-accent: var(--nx-accent-discover);
	--nx-discover-bg: #0a0e12;
	--nx-discover-glass: rgba(10, 15, 20, 0.65);
}