/* ═══════════════════════════════════════
   DESIGN TOKENS — Variables
   Extraído de: 4d_capitalproject v4.html
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300;0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&display=swap');

:root {
    --bg-base:       #04090f;
    --bg-surface:    #08111f;
    --bg-raised:     #0d1a2e;
    --bg-elevated:   #132340;

    --border-ghost:   rgba(120, 160, 220, 0.04);
    --border-subtle:  rgba(120, 160, 220, 0.08);
    --border-default: rgba(120, 160, 220, 0.14);
    --border-strong:  rgba(120, 160, 220, 0.22);
    --border-accent:  rgba(56, 189, 248, 0.32);

    --glass-bg:  rgba(8, 17, 31, 0.92);

    --accent-sky:     #38bdf8;
    --accent-blue:    #60a5fa;
    --accent-indigo:  #818cf8;
    --accent-emerald: #34d399;
    --accent-amber:   #fbbf24;
    --accent-rose:    #fb7185;
    --accent-purple:  #c084fc;

    --text-primary:   #dde8f8;
    --text-secondary: rgba(221, 232, 248, 0.52);
    --text-muted:     rgba(221, 232, 248, 0.28);
    --text-accent:    #38bdf8;

    --shadow-sm:   0 2px 8px rgba(0,0,0,0.40);
    --shadow-md:   0 8px 24px rgba(0,0,0,0.48);
    --shadow-lg:   0 20px 60px rgba(0,0,0,0.58);
    --shadow-glow: 0 0 24px rgba(56,189,248,0.18);

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  24px;
    --radius-pill: 999px;

    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
}