/* ==========================================================
   SINGLETOWN DESIGN SYSTEM
   Version 1.0
========================================================== */

:root {

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

    --color-primary: #7C3AED;
    --color-primary-dark: #5B21B6;
    --color-primary-light: #A78BFA;

    --color-accent: #FF9F43;

    --color-bg: #FAF7F3;
    --color-surface: #FFFFFF;

    --color-text: #2B2B2B;
    --color-text-light: #6B7280;

    --color-success: #22C55E;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;



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

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

    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 3rem;
    --font-size-3xl: 4rem;
    --font-size-hero: clamp(3rem, 8vw, 6rem);



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

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



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

    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 48px;
    --space-6: 64px;
    --space-7: 96px;
    --space-8: 128px;



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

    --container-width: 1200px;

    --section-padding: 120px;

    --navbar-height: 80px;



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

    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 32px;
    --radius-pill: 999px;



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

    --shadow-small:
        0 8px 20px rgba(0,0,0,.05);

    --shadow-medium:
        0 20px 50px rgba(0,0,0,.08);

    --shadow-large:
        0 40px 100px rgba(0,0,0,.12);



    /* ======================================================
       ANIMATIONS
    ====================================================== */

    --duration-fast: 200ms;
    --duration-normal: 400ms;
    --duration-slow: 700ms;

    --ease: cubic-bezier(.22,.61,.36,1);

}