/* ========================================= */
/* FLUX ID — Design Tokens (Single Source)   */
/* ========================================= */
/* Import this file FIRST on every page.     */
/* Never redefine these values in page CSS.  */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    /* ---- Backgrounds ---- */
    --bg-main:    #0b0c10;
    --bg-card:    #13141C;
    --bg-surface: #111218;
    --bg-input:   #1a1b23;

    /* ---- Brand colours ---- */
    --flux-purple:       #6a00ff;
    --flux-purple-hover: #832bff;
    --flux-purple-glow:  rgba(106, 0, 255, 0.4);
    --flux-cyan:         #06b6d4;
    --flux-cyan-glow:    rgba(6, 182, 212, 0.25);

    /* ---- Semantic colours ---- */
    --color-success: #10b981;
    --color-error:   #ef4444;
    --color-warning: #f59e0b;

    /* ---- Text ---- */
    --text-main:  #f0f0f5;
    --text-muted: #9ca3af;
    --text-dim:   #4b5563;

    /* ---- Borders ---- */
    --border-color:  rgba(255, 255, 255, 0.06);
    --border-light:  rgba(255, 255, 255, 0.1);

    /* ---- Typography ---- */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* ---- Misc ---- */
    --radius-sm:  8px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.3);
}