/* ==========================================================
   Miko Software Services Design System
   Version : 2.0
   ========================================================== */

:root {

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

    --primary: #FA0D1C;
    --primary-dark: #D70918;
    --primary-darker: #980814;
    --primary-light: #FFF4F5;

    --secondary: #111827;
    --secondary-light: #1F2937;

    --white: #FFFFFF;
    --black: #000000;

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

    --background: #FFFFFF;
    --background-light: #FAFAFA;
    --background-dark: #111827;

    --surface: #FFFFFF;
    --surface-hover: #FCFCFC;
    --surface-dark: #1F2937;

    /* ======================================================
       TEXT COLORS
    ====================================================== */

    --text: #111827;
    --text-light: #4B5563;
    --text-muted: #6B7280;
    --text-inverse: #FFFFFF;

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

    --border: #E5E7EB;
    --border-light: #F1F5F9;
    --border-dark: #D1D5DB;

    /* ======================================================
       STATUS COLORS
    ====================================================== */

    --success: #16A34A;
    --success-light: #ECFDF3;

    --warning: #F59E0B;
    --warning-light: #FFF7ED;

    --danger: #DC2626;
    --danger-light: #FEF2F2;

    --info: #2563EB;
    --info-light: #EFF6FF;

    /* ======================================================
       GRADIENTS
    ====================================================== */

    --gradient-primary:
        linear-gradient(
            135deg,
            #980814 0%,
            #D70918 45%,
            #FA0D1C 100%
        );

    --gradient-dark:
        linear-gradient(
            135deg,
            #111827 0%,
            #1F2937 100%
        );

    --gradient-light:
        linear-gradient(
            135deg,
            #FFFFFF 0%,
            #FAFAFA 100%
        );

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

    --font-heading: 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;

    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    /* ======================================================
       FONT SIZES
    ====================================================== */

    --fs-xs: .75rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.25rem;
    --fs-2xl: 1.5rem;
    --fs-3xl: 2rem;
    --fs-4xl: 2.75rem;
    --fs-5xl: 3.5rem;
    --fs-6xl: 4.5rem;

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

    --lh-tight: 1.1;
    --lh-heading: 1.2;
    --lh-normal: 1.6;
    --lh-relaxed: 1.8;

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

    --tracking-tight: -.04em;
    --tracking-normal: 0;
    --tracking-wide: .04em;

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

    --shadow-xs:
        0 2px 6px rgba(0,0,0,.04);

    --shadow-sm:
        0 4px 12px rgba(0,0,0,.05);

    --shadow-md:
        0 10px 25px rgba(0,0,0,.08);

    --shadow-lg:
        0 20px 50px rgba(0,0,0,.12);

    --shadow-xl:
        0 35px 80px rgba(0,0,0,.16);

    --shadow-primary:
        0 20px 40px rgba(250,13,28,.20);

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

    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;

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

    --space-xs: .5rem;
    --space-sm: .75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

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

    --container-width: 1280px;

    --header-height: 88px;

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

    --transition-fast: .2s ease;
    --transition: .3s ease;
    --transition-slow: .5s ease;

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

    --z-header: 100;
    --z-dropdown: 300;
    --z-sticky: 500;
    --z-popup: 900;
    --z-modal: 9999;

}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:var(--font-body);

    font-size:var(--fs-base);

    line-height:var(--lh-normal);

    color:var(--text);

    background:var(--background);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

}

h1,
h2,
h3,
h4,
h5,
h6{

    font-family:var(--font-heading);

    color:var(--text);

    font-weight:var(--fw-extrabold);

    line-height:var(--lh-heading);

    letter-spacing:var(--tracking-tight);

}

p{

    color:var(--text-light);

}

/* ==========================================================
   LINKS
========================================================== */

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

a:hover{

    color:var(--primary);

}

/* ==========================================================
   BUTTON FOCUS
========================================================== */

button,
input,
textarea,
select{

    transition:var(--transition);

}

button:focus,
input:focus,
textarea:focus,
select:focus{

    outline:none;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--primary);

    color:white;

}

/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#f5f5f5;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}