/*
 * tokens.css — Design System Custom Properties
 * Esthyak Ahmmed Siyam Portfolio
 * ==========================================
 */

:root {
    /* ── Backgrounds ─────────────────────────── */
    --bg-void: #080B12;
    /* page background */
    --bg-surface: #0E1117;
    /* section alt / card bg */
    --bg-elevated: #161B27;
    /* nav on scroll / raised cards */
    --bg-glass: rgba(22, 27, 39, 0.72);
    /* glassmorphism */
    --bg-glass-cinematic: rgba(8, 11, 18, 0.58);
    /* new cinematic glass nav */
    --gradient-border-gold: linear-gradient(135deg, var(--accent) 0%, rgba(201, 168, 76, 0.1) 50%, var(--accent-blue) 100%);
    /* ── Text ─────────────────────────────────── */
    --text-primary: #F0F2F5;
    --text-secondary: #8B95A8;
    --text-muted: #4A5568;
    /* ── Accent — Gold (strategic, premium) ───── */
    --accent: #C9A84C;
    --accent-dim: rgba(201, 168, 76, 0.12);
    --accent-glow: rgba(201, 168, 76, 0.22);
    --accent-border: rgba(201, 168, 76, 0.30);
    --accent-hover: #DFC06A;
    /* ── Accent — Blue (dev / tech) ───────────── */
    --accent-blue: #4A90D9;
    --accent-blue-dim: rgba(74, 144, 217, 0.12);
    /* ── Borders ──────────────────────────────── */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-muted: rgba(255, 255, 255, 0.10);
    --border-accent: var(--accent-border);
    /* ── Typography ───────────────────────────── */
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    /* ── Spacing scale ────────────────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-32: 8rem;
    /* ── Layout ───────────────────────────────── */
    --container-max: 1200px;
    --container-padding: clamp(1.25rem, 5vw, 3rem);
    /* ── Radius ───────────────────────────────── */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    /* ── Transitions ──────────────────────────── */
    --transition-fast: 160ms ease;
    --transition: 260ms ease;
    --transition-slow: 420ms ease;
    --transition-reveal: 600ms cubic-bezier(0.16, 1, 0.3, 1);
    /* ── Shadows ──────────────────────────────── */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-glow: 0 0 32px var(--accent-glow);
    --shadow-blue: 0 0 32px rgba(74, 144, 217, 0.18);
    /* ── Z-index ──────────────────────────────── */
    --z-nav: 100;
    --z-overlay: 200;
    --z-modal: 300;
}