/* ============================================================
   PENTASYSAI — DESIGN TOKENS
   Unified CSS Custom Properties for the entire site.
   ============================================================ */

:root {
    /* ——————————————————————————————————————————
       CORE BRAND PALETTE (LIGHT THEME)
    —————————————————————————————————————————— */
    --bg-void:        #f8fafc;
    --bg-deep:        #ffffff;
    --bg-surface:     #f1f5f9;
    --bg-elevated:    #e2e8f0;

    /* Glass / Panel */
    --glass-bg:       rgba(255, 255, 255, 0.75);
    --glass-bg-hover: rgba(255, 255, 255, 0.9);
    --glass-border:   rgba(15, 23, 42, 0.08);
    --glass-border-hover: rgba(15, 23, 42, 0.15);
    --glass-blur:     16px;

    /* Solid White for Dark UI Elements (Buttons, etc.) */
    --white-solid:    #ffffff;

    /* ——————————————————————————————————————————
       BRAND PALETTE — CYBERSECURITY (GOLD ACCENTS)
       —————————————————————————————————————————— */
    --neon-cyan:      #b48008;
    --neon-cyan-rgb:  180, 128, 8;
    --neon-purple:    #7c3aed;
    --neon-purple-rgb:124, 58, 237;
    --neon-red:       #dc2626;
    --neon-red-rgb:   220, 38, 38;
    --neon-gold:      #b48008;
    --neon-gold-rgb:  180, 128, 8;
    --neon-green:     #16a34a;
    --neon-green-rgb: 22, 163, 74;

    /* ——————————————————————————————————————————
       ACCENT PALETTE — DEVELOPMENT / AI
    —————————————————————————————————————————— */
    --dev-indigo:     #4f46e5;
    --dev-indigo-rgb: 79, 70, 229;
    --dev-violet:     #7c3aed;
    --dev-violet-rgb: 124, 58, 237;
    --dev-amber:      #d97706;
    --dev-amber-rgb:  217, 119, 6;
    --dev-emerald:    #059669;
    --dev-emerald-rgb: 5, 150, 105;
    --dev-rose:       #e11d48;
    --dev-rose-rgb:   225, 29, 72;
    --dev-sky:        #0284c7;
    --dev-sky-rgb:    2, 132, 199;

    /* ——————————————————————————————————————————
       ACCENT PALETTE — DIGITAL MARKETING
       —————————————————————————————————————————— */
    --mkt-rose:       #e11d48;
    --mkt-rose-rgb:   225, 29, 72;

    /* ——————————————————————————————————————————
       TEXT COLORS (SLATE HIERARCHY)
    —————————————————————————————————————————— */
    --text-primary:   #0f172a;
    --text-secondary: #334155;
    --text-muted:     #475569;
    --text-dim:       #64748b;
    --text-white:     #0f172a; /* Mapped to headings default */

    /* ——————————————————————————————————————————
       TYPOGRAPHY
       —————————————————————————————————————————— */
    --font-display:   'Plus Jakarta Sans', sans-serif;
    --font-body:      'Inter', sans-serif;
    --font-mono:      'JetBrains Mono', monospace;

    --fs-hero:        clamp(2.5rem, 5vw, 4rem);
    --fs-h1:          clamp(2rem, 4vw, 3.25rem);
    --fs-h2:          clamp(1.75rem, 3vw, 2.5rem);
    --fs-h3:          clamp(1.25rem, 2vw, 1.6rem);
    --fs-h4:          clamp(1rem, 1.5vw, 1.2rem);
    --fs-body:        1rem;
    --fs-body-lg:     1.15rem;
    --fs-small:       0.875rem;
    --fs-xs:          0.75rem;
    --fs-badge:       0.8rem;

    --lh-tight:       1.25;
    --lh-normal:      1.6;
    --lh-relaxed:     1.75;

    --ls-wide:        1px;
    --ls-wider:       2px;
    --ls-widest:      3px;

    /* ——————————————————————————————————————————
       SPACING SCALE (8px base)
    —————————————————————————————————————————— */
    --space-1:  0.25rem;   /* 4px */
    --space-2:  0.5rem;    /* 8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-5:  1.25rem;   /* 20px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-10: 2.5rem;    /* 40px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
    --space-20: 5rem;      /* 80px */
    --space-24: 6rem;      /* 96px */
    --space-32: 8rem;      /* 128px */

    /* ——————————————————————————————————————————
       LAYOUT
    —————————————————————————————————————————— */
    --container-max:  1280px;
    --container-pad:  var(--space-5);
    --header-height:  80px;
    --section-pad:    var(--space-20);

    /* ——————————————————————————————————————————
       BORDERS & RADIUS
    —————————————————————————————————————————— */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ——————————————————————————————————————————
       SHADOWS & GLOW (SOFT LIGHT THEME SHADOWS)
    —————————————————————————————————————————— */
    --shadow-sm:   0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md:   0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --shadow-lg:   0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.03);
    --shadow-xl:   0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.03);

    --glow-cyan:   0 0 20px rgba(var(--neon-cyan-rgb), 0.08), 0 0 60px rgba(var(--neon-cyan-rgb), 0.03);
    --glow-cyan-strong: 0 0 30px rgba(var(--neon-cyan-rgb), 0.12), 0 0 80px rgba(var(--neon-cyan-rgb), 0.05);
    --glow-purple: 0 0 20px rgba(var(--neon-purple-rgb), 0.08), 0 0 60px rgba(var(--neon-purple-rgb), 0.03);
    --glow-indigo: 0 0 20px rgba(var(--dev-indigo-rgb), 0.08), 0 0 60px rgba(var(--dev-indigo-rgb), 0.03);
    --glow-rose:   0 0 20px rgba(var(--mkt-rose-rgb), 0.08), 0 0 60px rgba(var(--mkt-rose-rgb), 0.03);

    /* ——————————————————————————————————————————
       TRANSITIONS
    —————————————————————————————————————————— */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-fast:   150ms var(--ease-out);
    --transition-base:   300ms var(--ease-out);
    --transition-slow:   500ms var(--ease-out);
    --transition-spring: 400ms var(--ease-spring);

    /* ——————————————————————————————————————————
       Z-INDEX LAYERS
    —————————————————————————————————————————— */
    --z-particles:   -1;
    --z-content:      2;
    --z-cards:        5;
    --z-header:      100;
    --z-dropdown:    200;
    --z-overlay:     500;
    --z-modal:       900;
    --z-scanlines:   9999;
}