/*
|--------------------------------------------------------------------------
| VABCORE Design System — Core Variables
|--------------------------------------------------------------------------
|
| This file contains the global design tokens used throughout:
|
| - Public website
| - Inner pages
| - CMS
| - Admin dashboard
| - Client portal
| - Future VABCORE products
|
| Avoid hardcoding colours, shadows, spacing, radii or transitions in
| component styles whenever a suitable variable exists here.
|
*/

:root {
    /*
    |--------------------------------------------------------------------------
    | Brand Colours
    |--------------------------------------------------------------------------
    */

    --color-primary-50: #eef6ff;
    --color-primary-100: #d9ebff;
    --color-primary-200: #bcdcff;
    --color-primary-300: #8fc8ff;
    --color-primary-400: #5aa9ff;
    --color-primary-500: #2585ff;
    --color-primary-600: #0f6fff;
    --color-primary-700: #0a56d4;
    --color-primary-800: #0b47aa;
    --color-primary-900: #0a3d91;
    --color-primary-950: #062c6b;

    --color-primary: var(--color-primary-900);
    --color-primary-light: var(--color-primary-600);
    --color-primary-dark: var(--color-primary-950);

    /*
    |--------------------------------------------------------------------------
    | Accent Colours
    |--------------------------------------------------------------------------
    */

    --color-accent-50: #effcff;
    --color-accent-100: #dff8ff;
    --color-accent-200: #b8f0ff;
    --color-accent-300: #7ee5ff;
    --color-accent-400: #3cd7ff;
    --color-accent-500: #22c7ff;
    --color-accent-600: #08a9dc;
    --color-accent-700: #0b87b1;
    --color-accent-800: #106f90;
    --color-accent-900: #115c77;

    --color-accent: var(--color-accent-500);
    --color-accent-dark: var(--color-accent-700);
    --color-accent-soft: var(--color-accent-100);

    /*
    |--------------------------------------------------------------------------
    | Semantic Colours
    |--------------------------------------------------------------------------
    */

    --color-success-50: #effdf5;
    --color-success-100: #d9fbe7;
    --color-success-500: #22c55e;
    --color-success-600: #16a34a;
    --color-success-700: #15803d;

    --color-warning-50: #fffbeb;
    --color-warning-100: #fef3c7;
    --color-warning-500: #f59e0b;
    --color-warning-600: #d97706;

    --color-danger-50: #fff1f2;
    --color-danger-100: #ffe4e6;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;

    --color-info-50: #eff6ff;
    --color-info-100: #dbeafe;
    --color-info-500: #3b82f6;
    --color-info-600: #2563eb;

    --color-success: var(--color-success-600);
    --color-warning: var(--color-warning-500);
    --color-danger: var(--color-danger-600);
    --color-info: var(--color-info-600);

    /*
    |--------------------------------------------------------------------------
    | Neutral Palette
    |--------------------------------------------------------------------------
    */

    --color-neutral-0: #ffffff;
    --color-neutral-25: #fcfdff;
    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e1;
    --color-neutral-400: #94a3b8;
    --color-neutral-500: #64748b;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1e293b;
    --color-neutral-900: #0f172a;
    --color-neutral-950: #07101f;

    /*
    |--------------------------------------------------------------------------
    | Application Colours
    |--------------------------------------------------------------------------
    */

    --color-white: var(--color-neutral-0);
    --color-light: #f7faff;

    --color-dark: #07152f;
    --color-dark-soft: #0f2144;
    --color-dark-muted: #17325f;

    --color-heading: #09152e;
    --color-text: #5f6878;
    --color-text-muted: #7f8999;
    --color-muted: #8b95a7;

    --color-border: #e3e9f2;
    --color-border-light: #edf1f7;
    --color-border-dark: rgba(255, 255, 255, 0.12);

    --color-surface: var(--color-white);
    --color-surface-soft: var(--color-light);
    --color-surface-muted: #eef4fc;
    --color-surface-dark: var(--color-dark);
    --color-surface-dark-soft: var(--color-dark-soft);

    /*
    |--------------------------------------------------------------------------
    | Background Colours
    |--------------------------------------------------------------------------
    */

    --background-body: var(--color-light);
    --background-section: var(--color-white);
    --background-section-soft: #f4f8ff;
    --background-section-dark: var(--color-dark);
    --background-overlay: rgba(7, 21, 47, 0.72);

    /*
    |--------------------------------------------------------------------------
    | Glass Surfaces
    |--------------------------------------------------------------------------
    */

    --glass-white-3: rgba(255, 255, 255, 0.03);
    --glass-white-5: rgba(255, 255, 255, 0.05);
    --glass-white-7: rgba(255, 255, 255, 0.07);
    --glass-white-9: rgba(255, 255, 255, 0.09);
    --glass-white-12: rgba(255, 255, 255, 0.12);
    --glass-white-16: rgba(255, 255, 255, 0.16);

    --glass-dark-45: rgba(6, 17, 38, 0.45);
    --glass-dark-60: rgba(6, 17, 38, 0.6);
    --glass-dark-75: rgba(6, 17, 38, 0.75);

    --glass-background: rgba(255, 255, 255, 0.08);
    --glass-background-light: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.14);
    --glass-blur: 18px;

    /*
    |--------------------------------------------------------------------------
    | Typography
    |--------------------------------------------------------------------------
    */

    --font-heading: "Poppins", sans-serif;
    --font-body: "Inter", sans-serif;
    --font-monospace:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.0625rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    --line-height-tight: 1.15;
    --line-height-heading: 1.2;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.75;
    --line-height-loose: 1.9;

    --letter-spacing-tight: -0.025em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.05em;
    --letter-spacing-wider: 0.08em;
    --letter-spacing-widest: 0.12em;

    /*
    |--------------------------------------------------------------------------
    | Layout
    |--------------------------------------------------------------------------
    */

    --container-width: 1280px;
    --container-wide: 1440px;
    --container-narrow: 960px;

    --header-height: 88px;
    --header-height-mobile: 76px;

    /*
    |--------------------------------------------------------------------------
    | Spacing System
    |--------------------------------------------------------------------------
    */

    --space-0: 0;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-18: 4.5rem;
    --space-20: 5rem;
    --space-24: 6rem;
    --space-28: 7rem;
    --space-30: 7.5rem;

    --section-space: 110px;
    --section-space-tablet: 95px;
    --section-space-mobile: 80px;

    /*
    |--------------------------------------------------------------------------
    | Border Radius
    |--------------------------------------------------------------------------
    */

    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-2xl: 40px;
    --radius-circle: 50%;
    --radius-pill: 999px;

    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --border-width: 1px;
    --border-default: var(--border-width) solid var(--color-border);
    --border-light: var(--border-width) solid var(--color-border-light);
    --border-glass: var(--border-width) solid var(--glass-border);
    --border-dark: var(--border-width) solid var(--color-border-dark);

    /*
    |--------------------------------------------------------------------------
    | Shadow System
    |--------------------------------------------------------------------------
    */

    --shadow-xs:
        0 2px 8px rgba(7, 21, 47, 0.04);

    --shadow-sm:
        0 8px 24px rgba(7, 21, 47, 0.07);

    --shadow-md:
        0 18px 45px rgba(7, 21, 47, 0.12);

    --shadow-lg:
        0 30px 70px rgba(7, 21, 47, 0.18);

    --shadow-xl:
        0 40px 100px rgba(7, 21, 47, 0.24);

    --shadow-floating:
        0 24px 65px rgba(5, 20, 48, 0.22);

    --shadow-inset:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    --shadow-primary:
        0 16px 38px rgba(15, 111, 255, 0.28);

    --shadow-primary-hover:
        0 22px 50px rgba(15, 111, 255, 0.4);

    --shadow-accent:
        0 16px 38px rgba(34, 199, 255, 0.24);

    --shadow-dark:
        0 30px 80px rgba(0, 0, 0, 0.3);

    /*
    |--------------------------------------------------------------------------
    | Glow System
    |--------------------------------------------------------------------------
    */

    --glow-primary-soft:
        0 0 30px rgba(15, 111, 255, 0.18);

    --glow-primary:
        0 0 45px rgba(15, 111, 255, 0.32);

    --glow-accent-soft:
        0 0 30px rgba(34, 199, 255, 0.18);

    --glow-accent:
        0 0 45px rgba(34, 199, 255, 0.32);

    /*
    |--------------------------------------------------------------------------
    | Gradients
    |--------------------------------------------------------------------------
    */

    --gradient-primary:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-primary-light)
        );

    --gradient-primary-reverse:
        linear-gradient(
            135deg,
            var(--color-primary-light),
            var(--color-primary)
        );

    --gradient-accent:
        linear-gradient(
            135deg,
            var(--color-primary-light),
            var(--color-accent)
        );

    --gradient-dark:
        linear-gradient(
            145deg,
            var(--color-dark),
            var(--color-primary-dark)
        );

    --gradient-hero:
        linear-gradient(
            135deg,
            #061126,
            #081d42 55%,
            #0a3d91
        );

    --gradient-footer:
        linear-gradient(
            145deg,
            #040b18,
            #06142d 55%,
            #092a5c
        );

    --gradient-light:
        linear-gradient(
            180deg,
            var(--color-white),
            var(--color-light)
        );

    --gradient-surface:
        linear-gradient(
            135deg,
            rgba(15, 111, 255, 0.06),
            rgba(34, 199, 255, 0.04)
        );

    --gradient-text:
        linear-gradient(
            90deg,
            var(--color-accent),
            var(--color-white)
        );

    /*
    |--------------------------------------------------------------------------
    | Transition System
    |--------------------------------------------------------------------------
    */

    --transition-instant: 100ms ease;
    --transition-fast: 180ms ease;
    --transition-base: 320ms ease;
    --transition-slow: 500ms ease;
    --transition-slower: 700ms ease;

    --transition-bounce:
        420ms cubic-bezier(0.34, 1.56, 0.64, 1);

    --transition-smooth:
        420ms cubic-bezier(0.22, 1, 0.36, 1);

    /*
    |--------------------------------------------------------------------------
    | Transform Values
    |--------------------------------------------------------------------------
    */

    --lift-xs: translateY(-2px);
    --lift-sm: translateY(-4px);
    --lift-md: translateY(-7px);
    --lift-lg: translateY(-10px);

    --press-transform: translateY(1px) scale(0.985);

    /*
    |--------------------------------------------------------------------------
    | Focus System
    |--------------------------------------------------------------------------
    */

    --focus-ring:
        0 0 0 4px rgba(15, 111, 255, 0.16);

    --focus-ring-accent:
        0 0 0 4px rgba(34, 199, 255, 0.18);

    /*
    |--------------------------------------------------------------------------
    | Z-Index System
    |--------------------------------------------------------------------------
    */

    --z-base: 1;
    --z-content: 10;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-overlay: 2000;
    --z-modal: 3000;
    --z-toast: 4000;
    --z-tooltip: 5000;

    /*
    |--------------------------------------------------------------------------
    | Component Defaults
    |--------------------------------------------------------------------------
    */

    --button-height: 52px;
    --button-padding-x: 28px;
    --button-radius: var(--radius-pill);

    --card-padding: 30px;
    --card-radius: var(--radius-lg);
    --card-border: var(--border-default);
    --card-background: var(--color-white);
    --card-shadow: var(--shadow-sm);
    --card-shadow-hover: var(--shadow-md);

    --input-height: 52px;
    --input-radius: var(--radius-md);
    --input-border: var(--border-default);
    --input-background: var(--color-white);

    /*
    |--------------------------------------------------------------------------
    | Backward-Compatible Aliases
    |--------------------------------------------------------------------------
    |
    | Existing component styles already use these names.
    | Keep them to prevent layout or colour regressions.
    |
    */

    --text-primary: var(--color-heading);
    --text-secondary: var(--color-text);
    --text-muted: var(--color-muted);

    --surface-primary: var(--color-surface);
    --surface-secondary: var(--color-surface-soft);

    --border-color: var(--color-border);
}