:root {
    /* 
     * QUONSCI V2 DESIGN TOKENS
     * Based on Fortune 50 Brand Guidelines & Soft Neumorphic UI
     */

    /* --- COLORS --- */
    --color-bg-primary: #EFF2F9;     /* Glacial White - Primary Background */
    --color-bg-secondary: #E4EBF1;   /* Soft Frost - Secondary Background / Cards */
    --color-border: #B5BFC6;         /* Steel Blue - Borders, Placeholders, Disabled */
    --color-text-main: #6E7F8D;      /* Slate Depth - Primary Text, Headings, Icons */

    /* Accent colours — added May 2026 */
    --color-slate-ink: #1A1F26;      /* Slate Ink - Primary headings, high-contrast text */
    --color-kinetic-azure: #2D5BFF;  /* Kinetic Azure - Typewriter accent, interactive highlights */

    /* Basic White/Dark for generic fallbacks */
    --color-white: #FFFFFF;
    --color-dark: #161B1D;

    /* --- TYPOGRAPHY --- */
    /* Note: Include these fonts via @font-face or a webfont service in the HTML/CSS if not locally installed */
    --font-heading: 'Campton', 'Inter', sans-serif; 
    --font-body: 'Avenir Next', 'Inter', sans-serif;

    /* --- SHADOWS (NEUMORPHISM) --- */
    /* Highlight color: #FAFBFF (100% opacity) */
    /* Shadow color: #161B1D (23% opacity) -> rgba(22, 27, 29, 0.23) */

    /* Inner Shadow (Pressed / Inset State) */
    --shadow-inner: 
        inset -5px -5px 10px #FAFBFF, 
        inset 5px 5px 10px rgba(22, 27, 29, 0.23);

    /* Level 1: Small Elevation (Buttons, Small Cards) */
    --shadow-sm: 
        -5px -5px 10px #FAFBFF, 
        5px 5px 10px rgba(22, 27, 29, 0.23);

    /* Level 2: Medium Elevation (Main Cards, Modals) */
    --shadow-md: 
        -10px -10px 20px #FAFBFF, 
        10px 10px 20px rgba(22, 27, 29, 0.23);

    /* Level 3: Large Elevation (Floating Actions, Prominent Dialogs) */
    --shadow-lg: 
        -20px -20px 40px #FAFBFF, 
        20px 20px 40px rgba(22, 27, 29, 0.23);

    /* --- SPACING & SIZING --- */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;

    /* --- BORDER RADIUS (Soft Edges) --- */
    --radius-sm: 12px;
    --radius-md: 24px;
    --radius-lg: 40px;
    --radius-full: 9999px;
}