/* ===================================================================
   HELIX Design System — Shared Base Styles
   Fonts - Reset - Design Tokens - Scrollbar - Animations
   =================================================================== */

/* -- Fonts --------------------------------------------------------- */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F,
        U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
        U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
        U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
        U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* -- Reset --------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
*:focus-visible {
    outline: 2px solid #2dd4bf;
    outline-offset: 2px;
}

/* -- Design Tokens ------------------------------------------------- */
:root {
    --bg: #0c0f14;
    --surface: #151921;
    --surface-2: #1e2230;
    --teal: #2dd4bf;
    --violet: #a78bfa;
    --orange: #fb923c;
    --blue: #60a5fa;
    --rose: #fb7185;
    --green: #4ade80;
    --gold: #fbbf24;
    --yellow: #fbbf24;
    --text: #e2e8f0;
    --text-dim: #94a3b8;
    --text-muted: #8891a5;
    --border: rgba(255, 255, 255, 0.06);
    --glass-bg: rgba(21, 25, 33, 0.65);
    --glass-border: rgba(255, 255, 255, 0.08);

    /* Fonts — canonical + aliases */
    --font: 'DM Sans', system-ui, -apple-system, sans-serif;
    --font-body: var(--font);
    --font-sans: var(--font);
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --font-mono: var(--mono);

    /* Radii — canonical + aliases */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-md: var(--radius);
    --r-sm: var(--radius-sm);
    --r-md: var(--radius);
    --r-lg: var(--radius-lg);

    /* Transition */
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* -- Scrollbar ----------------------------------------------------- */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* -- Common Animations --------------------------------------------- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(20px); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes toastOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(12px); }
}

/* -- Reduced Motion ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}