/* ==========================================================
   DESIGN SYSTEM
========================================================== */

:root{

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

    --primary: #2563EB;
    --primary-dark: #1D4ED8;
    --primary-soft: #EEF2FF;

    --success: #22C55E;

    --background: #F8FAFC;
    --surface: #FFFFFF;

    --text: #0F172A;
    --text-light: #64748B;

    --border: #E2E8F0;

    --success-soft: #ECFDF5;
    --success-dark: #15803D;

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

    --font-family: "Inter", sans-serif;

    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.75rem;
    --font-size-2xl: 2.5rem;
    --font-size-hero: 3.5rem;

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

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

    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;

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

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

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

    --shadow-sm:
        0 10px 30px rgba(15, 23, 42, .05);

    --shadow-md:
        0 20px 50px rgba(15, 23, 42, .08);

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

    --container-width: 1100px;
    --content-width: 720px;
    --container-width:1100px;

    --content-width:720px;

    --page-margin:5rem;
    --section-gap:4rem;

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

    --transition-fast: .2s ease;
    --transition-normal: .3s ease;

}