/* ==========================================================================
   THETOD STUDIO — DESIGN SYSTEM & TOKENS
   Author: TheTod / Dhaval Vadher
   ========================================================================== */

:root {
    /* Color Palette - Core Backgrounds */
    --bg-base: #06090f;
    --bg-surface: #0a0e17;
    --bg-card: #0e1422;
    --bg-card-secondary: #141d30;
    --bg-card-elevated: #1b263d;
    --bg-glass: rgba(14, 20, 34, 0.75);
    --bg-glass-heavy: rgba(8, 11, 17, 0.92);

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-card: #1f2a3f;
    --border-card-hover: #2e3e5c;
    --border-gold: rgba(245, 197, 66, 0.35);
    --border-emerald: rgba(16, 185, 129, 0.35);
    --border-cyan: rgba(56, 189, 248, 0.35);

    /* Brand Accents */
    --gold-primary: #f5c542;
    --gold-light: #ffdf70;
    --gold-dark: #c99b20;
    --gold-glow: rgba(245, 197, 66, 0.22);

    --emerald-primary: #10b981;
    --emerald-light: #34d399;
    --emerald-dark: #059669;
    --emerald-glow: rgba(16, 185, 129, 0.22);

    --cyan-primary: #38bdf8;
    --cyan-light: #7dd3fc;
    --cyan-dark: #0284c7;
    --cyan-glow: rgba(56, 189, 248, 0.22);

    --purple-accent: #a855f7;
    --purple-glow: rgba(168, 85, 247, 0.22);

    --danger-red: #ef4444;

    /* Typography Colors */
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-inverse: #06090f;

    /* Typography Families */
    --font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Space Grotesk', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing & Layout */
    --container-max-width: 1200px;
    --container-narrow: 880px;
    --navbar-height: 76px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Shadows & Elevation */
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 20px 40px -15px rgba(0, 0, 0, 0.7), 0 0 25px var(--gold-glow);
    --shadow-glow-cyan: 0 0 35px var(--cyan-glow);
    --shadow-glow-gold: 0 0 35px var(--gold-glow);

    /* Transitions */
    --transition-fast: 0.18s ease;
    --transition-normal: 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}