/* ============================================================
   Elysium-IT — Design System Variables
   Copyright (c) 2026 Alexandre Hanon-Degroote (Elysium-IT)
   ============================================================ */

/* Self-hosted font faces — woff2 files go in assets/fonts/
   Download from: https://fontsource.org/fonts/syne
                  https://fontsource.org/fonts/dm-sans
                  https://fontsource.org/fonts/jetbrains-mono
*/
@font-face {
    font-family: 'Syne';
    src: url('../fonts/syne-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dm-sans-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ── Colors ─────────────────────────────────────────── */
    --color-bg:           #0A0E14;
    --color-bg-surface:   #111720;
    --color-bg-elevated:  #1A2232;
    --color-accent:       #00D4FF;
    --color-accent-dim:   #0097B8;
    --color-accent-glow:  rgba(0, 212, 255, 0.15);
    --color-text-primary: #E8EDF5;
    --color-text-muted:   #7A8AA0;
    --color-border:       #1E2C3D;
    --color-border-accent: rgba(0, 212, 255, 0.25);
    --color-success:      #00C47A;
    --color-warning:      #F5A623;
    --color-error:        #FF4D6A;

    /* ── Typography ─────────────────────────────────────── */
    --font-display: 'Syne', 'Segoe UI', system-ui, sans-serif;
    --font-body:    'DM Sans', 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Consolas', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-md:   1.125rem;   /* 18px */
    --text-lg:   1.25rem;    /* 20px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.5rem;     /* 40px */
    --text-4xl:  3.5rem;     /* 56px */
    --text-5xl:  5rem;       /* 80px */

    --leading-tight:  1.1;
    --leading-snug:   1.3;
    --leading-base:   1.6;
    --leading-loose:  1.8;

    --tracking-tight: -0.03em;
    --tracking-base:  0;
    --tracking-wide:  0.08em;
    --tracking-wider: 0.15em;

    /* ── Spacing (8px base) ─────────────────────────────── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;
    --space-40: 160px;

    /* ── Layout ─────────────────────────────────────────── */
    --container-max:  1200px;
    --container-text: 720px;
    --gutter:         clamp(1.5rem, 5vw, 4rem);

    /* ── Borders ────────────────────────────────────────── */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  20px;
    --radius-full: 9999px;

    /* ── Shadows ────────────────────────────────────────── */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.4);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.5);
    --shadow-lg:    0 8px 32px rgba(0,0,0,0.6);
    --shadow-accent: 0 0 24px rgba(0, 212, 255, 0.2);
    --shadow-accent-lg: 0 0 48px rgba(0, 212, 255, 0.3);

    /* ── Motion ─────────────────────────────────────────── */
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
    --duration-fast:   150ms;
    --duration-base:   250ms;
    --duration-slow:   400ms;
    --duration-slower: 700ms;

    /* ── Z-index ────────────────────────────────────────── */
    --z-nav:     100;
    --z-overlay: 200;
    --z-modal:   300;
}