/* ==========================================================
   FIDI-INVEST Enterprise Platform
   SCIE SVS v2.0
   File : variables.css
   Version : 1.0
   Status : IMPLEMENTATION
   ========================================================== */

:root {

    /* ======================================================
       BRAND IDENTITY
    ====================================================== */

    --brand-primary: #FFFFFF;
    --brand-secondary: #1E88E5;

    /* ======================================================
       BACKGROUND
    ====================================================== */

    --bg-primary: #081320;
    --bg-secondary: #0D1B2A;
    --bg-surface: #132235;

    /* ======================================================
       TEXT COLOR
    ====================================================== */

    --text-primary: #FFFFFF;
    --text-secondary: #C7D2E4;
    --text-muted: #8FA3BF;

    /* ======================================================
       BORDER
    ====================================================== */

    --border-color: rgba(255,255,255,.10);

    /* ======================================================
       SHADOW
    ====================================================== */

    --shadow-soft:
        0 8px 30px rgba(0,0,0,.20);

    /* ======================================================
       BORDER RADIUS
    ====================================================== */

    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 20px;

}

    /* ======================================================
       TYPOGRAPHY
    ====================================================== */

    --font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

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

    /* ======================================================
       FONT SIZE
    ====================================================== */

    --font-xs: 12px;
    --font-sm: 14px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 28px;
    --font-3xl: 42px;
    --font-4xl: 64px;

    /* ======================================================
       LINE HEIGHT
    ====================================================== */

    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.7;

    /* ======================================================
       LETTER SPACING
    ====================================================== */

    --letter-tight: -1px;
    --letter-normal: 0;
    --letter-wide: .2px;

    /* ======================================================
       SPACING
    ====================================================== */

    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;
    --space-2xl: 64px;

    /* ======================================================
       LAYOUT
    ====================================================== */

    --header-height: 88px;

    --container-width: 1280px;

    --content-width: 1440px;

    --section-spacing: 120px;
    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-background: -1;
    --z-default: 1;
    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 500;
    --z-loader: 1000;

    /* ======================================================
       TRANSITION
    ====================================================== */

    --transition-fast: .20s ease;
    --transition-normal: .30s ease;
    --transition-slow: .50s ease;

    /* ======================================================
       OPACITY
    ====================================================== */

    --opacity-disabled: .50;
    --opacity-overlay: .70;

    /* ======================================================
       GLASS EFFECT
    ====================================================== */

    --glass-background: rgba(255,255,255,.05);
    --glass-border: rgba(255,255,255,.10);

    /* ======================================================
       COMPONENT SIZE
    ====================================================== */

    --button-height: 48px;
    --input-height: 48px;

    --login-card-width: 420px;

    /* ======================================================
       END OF VARIABLES
    ====================================================== */

}