/* ==========================================================================

   Fluxoweby
   Design Tokens
   Version: 1.0

   ========================================================================== */

:root{

    /* =====================================================
       BRAND
    ===================================================== */

    --color-primary:#2563eb;
    --color-primary-50:#eff6ff;
    --color-primary-100:#dbeafe;
    --color-primary-200:#bfdbfe;
    --color-primary-300:#93c5fd;
    --color-primary-400:#60a5fa;
    --color-primary-500:#3b82f6;
    --color-primary-600:#2563eb;
    --color-primary-700:#1d4ed8;
    --color-primary-800:#1e40af;
    --color-primary-900:#172554;

    /* =====================================================
       SURFACE
    ===================================================== */

    --color-background:#070b16;

    --color-surface:#101827;

    --color-surface-hover:#16233b;

    --color-surface-alt:#1d2b45;

    /* =====================================================
       TEXT
    ===================================================== */

    --color-text:#f8fafc;

    --color-text-muted:#94a3b8;

    --color-text-soft:#64748b;

    /* =====================================================
       STATUS
    ===================================================== */

    --color-success:#22c55e;

    --color-warning:#f59e0b;

    --color-danger:#ef4444;

    --color-info:#0ea5e9;

    /* =====================================================
       BORDERS
    ===================================================== */

    --border-color:rgba(255,255,255,.08);

    --border-color-hover:rgba(255,255,255,.18);

    /* =====================================================
       GLASS
    ===================================================== */

    --glass-bg:rgba(255,255,255,.04);

    --glass-border:rgba(255,255,255,.08);

    --glass-blur:18px;

    /* =====================================================
       SHADOWS
    ===================================================== */

    --shadow-xs:0 2px 8px rgba(0,0,0,.08);

    --shadow-sm:0 8px 20px rgba(0,0,0,.12);

    --shadow-md:0 18px 40px rgba(0,0,0,.18);

    --shadow-lg:0 30px 70px rgba(0,0,0,.28);

    --shadow-xl:0 50px 120px rgba(0,0,0,.38);

    /* =====================================================
       BORDER RADIUS
    ===================================================== */

    --radius-xs:6px;

    --radius-sm:10px;

    --radius-md:16px;

    --radius-lg:24px;

    --radius-xl:32px;

    --radius-pill:999px;

    /* =====================================================
       SPACING
    ===================================================== */

    --space-1:4px;

    --space-2:8px;

    --space-3:12px;

    --space-4:16px;

    --space-5:20px;

    --space-6:24px;

    --space-8:32px;

    --space-10:40px;

    --space-12:48px;

    --space-16:64px;

    --space-20:80px;

    --space-24:96px;

    --space-32:128px;

    /* =====================================================
       CONTAINER
    ===================================================== */

    --container-width:1200px;

    --container-padding:24px;

    /* =====================================================
       HEADER
    ===================================================== */

    --header-height:84px;

    /* =====================================================
       Z INDEX
    ===================================================== */

    --z-dropdown:1000;

    --z-sticky:1010;

    --z-fixed:1020;

    --z-modal-backdrop:1030;

    --z-modal:1040;

    --z-popover:1050;

    --z-tooltip:1060;

    /* =====================================================
       TRANSITIONS
    ===================================================== */

    --transition-fast:.18s ease;

    --transition:.3s ease;

    --transition-slow:.45s ease;

    /* =====================================================
       ANIMATIONS
    ===================================================== */

    --animation-duration:.8s;

    --animation-delay:.15s;

    --animation-easing:cubic-bezier(.22,.61,.36,1);

    /* =====================================================
       TYPOGRAPHY
    ===================================================== */

    --font-family:"Inter",system-ui,-apple-system,
    BlinkMacSystemFont,"Segoe UI",sans-serif;

    --font-size-xs:.75rem;

    --font-size-sm:.875rem;

    --font-size-md:1rem;

    --font-size-lg:1.125rem;

    --font-size-xl:1.25rem;

    --font-size-2xl:1.5rem;

    --font-size-3xl:2rem;

    --font-size-4xl:2.75rem;

    --font-size-5xl:4rem;

    --font-size-hero:clamp(3rem,7vw,5.5rem);

    /* =====================================================
       LINE HEIGHT
    ===================================================== */

    --line-tight:1.1;

    --line-normal:1.5;

    --line-relaxed:1.8;

}

/* ==========================================================
   LIGHT THEME
========================================================== */

[data-theme="light"]{

    --color-background:#f8fafc;

    --color-surface:#ffffff;

    --color-surface-hover:#eef2f7;

    --color-surface-alt:#e5eaf3;

    --color-text:#0f172a;

    --color-text-muted:#475569;

    --color-text-soft:#64748b;

    --border-color:rgba(15,23,42,.08);

    --border-color-hover:rgba(15,23,42,.18);

    --glass-bg:rgba(255,255,255,.75);

    --glass-border:rgba(0,0,0,.08);

}