/* ==========================================================
   VINCIT MANAGEMENT CONSULTING
   FILE       : 01-variables.css
   PURPOSE    : Global Design Tokens & Brand Variables
   VERSION    : 1.0.0
========================================================== */

:root {

    /* ======================================================
       BRAND COLORS
    ====================================================== */

    --color-navy: #0B3C5D;
    --color-navy-dark: #082C44;
    --color-navy-light: #164F73;

    --color-emerald: #2E8B57;
    --color-emerald-dark: #236B43;
    --color-emerald-light: #4FAE78;

    --color-gold: #C8A24D;
    --color-gold-dark: #A98535;
    --color-gold-light: #D9BB72;


    /* ======================================================
       NEUTRAL COLORS
    ====================================================== */

    --color-white: #FFFFFF;

    --color-off-white: #F8FAF9;
    --color-light: #F2F5F4;

    --color-border: #E1E8E5;

    --color-text: #263238;
    --color-text-light: #66737A;

    --color-heading: #123B52;


    /* ======================================================
       BACKGROUNDS
    ====================================================== */

    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-off-white);
    --bg-dark: var(--color-navy);
    --bg-dark-alt: var(--color-navy-dark);


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

    --font-heading:
        "Playfair Display",
        Georgia,
        serif;

    --font-body:
        "Manrope",
        "Segoe UI",
        Arial,
        sans-serif;


    /* ======================================================
       FONT WEIGHTS
    ====================================================== */

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


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

    --container-width: 1240px;

    --container-padding: 24px;


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

    --section-padding: 100px;
    --section-padding-small: 70px;


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

    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;

    --radius-pill: 999px;


    /* ======================================================
       SHADOWS
    ====================================================== */

    --shadow-sm:
        0 4px 14px rgba(11, 60, 93, 0.08);

    --shadow-md:
        0 10px 30px rgba(11, 60, 93, 0.12);

    --shadow-lg:
        0 20px 50px rgba(11, 60, 93, 0.16);


    /* ======================================================
       TRANSITIONS
    ====================================================== */

    --transition-fast:
        180ms ease;

    --transition-normal:
        300ms ease;

    --transition-slow:
        500ms ease;


    /* ======================================================
       Z-INDEX
    ====================================================== */

    --z-base: 1;
    --z-header: 1000;
    --z-overlay: 1100;
    --z-modal: 2000;
}