/* ==========================================================================
    1. CSS RESET & BASE
    ========================================================================== */
    
    * {
        box-sizing: border-box
    }

    html {
        font-size: 16px; 
    }

    body{
        background-color: var(--primary-50);
        font-family: var(--font-family-base);
        display: flex;
        overflow: hidden;
        margin: 0;
    }


    body.dragging {
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    h1, h2, h3, h4, h5, h6 {
        /* font-family: var(--font-family-base); */
        font-weight: var(--font-weight-300);
        line-height: var(--line-height-tight);
        margin-bottom: var(--space-4);
    }

    h1 { font-size: var(--font-size-4xl); }
    h2 { font-size: var(--font-size-3xl); }
    h3 { font-size: var(--font-size-2xl); }
    h4 { font-size: var(--font-size-xl); }
    h5 { font-size: var(--font-size-lg); }
    h6 { font-size: var(--font-size-base); }

    p {
        margin-bottom: var(--space-4);
        line-height: var(--line-height-base);
    }

    button, 
    input[type="button"], 
    input[type="submit"] {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        color: inherit; 
        background: none; 
        font-family: inherit;
    }




/* ==========================================================================
   2. CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================================================== */

    @font-face {
        font-family: 'Playwrite HU';
        src: url('../fonts/Playwrite_HU/PlaywriteHU-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'Libertinus Sans';
        src: url('../fonts/Libertinus_Sans/LibertinusSans-Regular.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'Cinzel';
        src: url('../fonts/Cinzel/Cinzel-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'Inter';
        src: url('../fonts/Inter-4.1/InterVariable.ttf') format('truetype');
        font-weight: 100 900;  /* valid because it's a TRUE variable font */
        font-style: normal;
        font-display: swap;
    }

     @font-face {
        font-family: 'Inter';
        src: url('../fonts/Inter-4.1/InterVariable-Italic.ttf') format('truetype');
        font-weight: 100 900;  /* valid because it's a TRUE variable font */
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'Plus Jakarta Sans';
        src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900;  /* valid because it's a TRUE variable font */
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Plus Jakarta Sans';
        src: url('../fonts/Plus_Jakarta_Sans/PlusJakartaSans-Italic-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 900;  /* valid because it's a TRUE variable font */
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: 'PatrickHand';
        src: url('../fonts/Patrick_Hand/PatrickHand-Regular.ttf') format('truetype');
        font-weight: 100 900;  /* valid because it's a TRUE variable font */
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'Playpen';
        src: url('../fonts/Playpen_Sans/PlaypenSans-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'garet-book';
        src: url('../fonts/garet/Garet-Book.ttf') format('truetype');
        font-weight: 100 400; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'garet-book';
        src: url('../fonts/garet/Garet-Heavy.ttf') format('truetype');
        font-weight: 500 900; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        /* JetBrainsMono-VariableFont_wght */
        font-family: 'JetBrains Mono';
        src: url('../fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'JetBrains Mono';
        src: url('../fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: italic;
    }

    @font-face {
        /* JetBrainsMono-VariableFont_wght */
        font-family: 'JetBrains Mono';
        src: url('../fonts/JetBrains_Mono/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: normal;
    }

    @font-face {
        font-family: 'JetBrains Mono';
        src: url('../fonts/JetBrains_Mono/JetBrainsMono-Italic-VariableFont_wght.ttf') format('truetype');
        font-weight: 100 800; /* tells browser the range it supports */
        font-style: italic;
    }

    :root {
        /* ===== SPACING SCALE ===== */
        /* Spacing scale in rem for consistent, responsive design */
        --space-0: 0;
        --space-4: 0.25rem;   /* 4px */
        --space-8: 0.5rem;    /* 8px */
        --space-12: 0.75rem;   /* 12px */
        --space-16: 1rem;      /* 16px */
        --space-20: 1.25rem;   /* 20px */
        --space-24: 1.5rem;    /* 24px */
        --space-32: 2rem;      /* 32px */
        --space-48: 3rem;     /* 48px */
        --space-64: 4rem;     /* 64px */
        --space-96: 6rem;     /* 96px */
        --space-128: 8rem;     /* 128px */
        --space-192: 12rem;     /* 128px */
        --space-256: 16rem;     /* 256px */
        --space-384: 24rem;     /* 384px */
        --space-512: 32rem;     /* 512px */
        --space-640: 40rem;     /* 640px */
        --space-768: 48rem;     /* 768px */

        /* ===== NEGATIVE SPACING SCALE ===== */
        /* Spacing scale in rem for consistent, responsive design */
        --space-neg-0: 0;
        --space-neg-4: -0.25rem;   /* 4px */
        --space-neg-8: -0.5rem;    /* 8px */
        --space-neg-12: -0.75rem;   /* 12px */
        --space-neg-16: -1rem;      /* 16px */
        --space-neg-20: -1.25rem;   /* 20px */
        --space-neg-24: -1.5rem;    /* 24px */
        --space-neg-32: -2rem;      /* 32px */
        --space-neg-48: -3rem;     /* 48px */
        --space-neg-64: -4rem;     /* 64px */
        --space-neg-96: -6rem;     /* 96px */
        --space-neg-128: -8rem;     /* 128px */
        --space-neg-192: -12rem;     /* 128px */
        --space-neg-256: -16rem;     /* 256px */
        --space-neg-384: -24rem;     /* 384px */
        --space-neg-512: -32rem;     /* 512px */
        --space-neg-640: -40rem;     /* 640px */
        --space-neg-768: -48rem;     /* 768px */

        /* ===== FONT SIZES ===== */
        --font-size-xs: 0.75rem;    /* 12px */
        --font-size-sm: 0.875rem;   /* 14px */
        --font-size-base: 1rem;     /* 16px */
        --font-size-lg: 1.125rem;   /* 18px */
        --font-size-xl: 1.25rem;    /* 20px */
        --font-size-2xl: 1.5rem;    /* 24px */
        --font-size-3xl: 1.875rem;  /* 30px */
        --font-size-4xl: 2.25rem;   /* 36px */
        --font-size-5xl: 3rem;      /* 48px */
        --font-size-6xl: 3.75rem;   /* 60px */
        --font-size-7xl: 4.5rem;      /* 72px */

        /* ===== FONT WEIGHTS ===== */
        --font-weight-100: 100;
        --font-weight-200: 200;
        --font-weight-300: 300;
        --font-weight-400: 400;
        --font-weight-500: 500;
        --font-weight-600: 600;
        --font-weight-700: 700;
        --font-weight-800: 800;
        --font-weight-900: 900;

        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

        /* ===== FONT FAMILIES ===== */
        --font-family-base: 'Inter', 'garet-book', -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        --font-family-mono: 'Fira Code', 'Monaco', 'Cascadia Code', monospace;
        /* 'Inter', 'Plus Jakarta Sans' */

        /* ===== LETTER SPACING ===== */
        --letter-spacing-base: normal;
        --letter-spacing-xs: 0.02rem; 
        --letter-spacing-sm: 0.04rem; 
        --letter-spacing-sm2: 0.1rem; 


        /* ===== LINE HEIGHTS ===== */
        --line-height-tight: 1.25;
        --line-height-base: 1.5;
        --line-height-relaxed: 1.75;

        /* ===== GRAY SCALE ===== */
        --white: hsl(0, 0%, 100%);
        --gray-50: hsl(210, 27%, 98%);
        --gray-100: hsl(220, 14%, 96%);
        --gray-200: hsl(220, 13%, 91%);
        --gray-300: hsl(220, 9%, 83%);
        --gray-400: hsl(220, 8%, 64%);
        --gray-500: hsl(220, 7%, 46%);
        --gray-600: hsl(220, 10%, 36%);
        --gray-700: hsl(220, 14%, 28%);
        --gray-800: hsl(220, 20%, 17%);
        --gray-900: hsl(220, 25%, 12%);
        --black: hsl(0, 0%, 0%);

        /* ===== PRIMARY COLORS ===== */
        --primary-50: hsl(50, 21%, 95%);
        --primary-50-1: hsl(30, 40%, 60%);
        /* 	hsl(50, 21%, 95%) */
        --primary-100: hsl(16, 53%, 50%);
        /* 	#C15F3C */
        --primary-200: #B1ADA1;
        --primary-300: hsl(48, 33.3%, 97.1%);
        --primary-400: hsl(53, 28.6%, 94.5%);
        --primary-500: hsl(48, 25%, 92.2%);  /* Main primary */
        --primary-600: hsl(50, 20.7%, 88.6%);
        --primary-650: hsl(49, 20%, 79%);
        --primary-700: #1d4ed8;
        --primary-800: #1e40af;
        --primary-900: #1e3a8a;
        --primary-950: #4ecdc4;


        --dark-50: hsl(60, 2.1%, 18.4%);
        --dark-100: hsl(60, 2.1%, 18.4%);
        --dark-200: hsl(60, 2.7%, 14.5%);
        --dark-300: hsl(30, 3.3%, 11.8%);
        --dark-400: hsl(60, 2.6%, 7.6%);
        --dark-500: hsl(48, 25%, 92.2%);  /* Main primary */
        --dark-600: hsl(48, 33.3%, 97.1%);
        --dark-700: hsl(48, 4.8%, 59.2%);


        --danger-000: hsl(0 73.1% 66.5%);
        --danger-100: hsl(0 58.6% 34.1%);
        --danger-200: hsl(0 58.6% 34.1%);
        --danger-900: hsl(0 23% 15.6%);
        --oncolor-100: hsl(0 0% 100%);
        --oncolor-200: hsl(60 6.7% 97.1%);
        --oncolor-300: hsl(60 6.7% 97.1%);


        /* ===== SEMANTIC COLORS ===== */
        --success: #10b981;
        --warning: #f59e0b;
        --error: #ef4444;
        --info: #3b82f6;

        /* ===== BORDER RADIUS ===== */
        --radius-sm: 0.25rem;   /* 4px */
        --radius-base: 0.5rem;  /* 8px */
        --radius-lg: 0.75rem;   /* 12px */
        --radius-xl: 1rem;      /* 16px */
        --radius-2xl: 1.5rem;    /* 24px */
        --radius-3xl: 2rem;      /* 32px */
        --radius-4xl: 3rem;      /* 48px */
        --radius-full: 9999px;

        /* ===== SHADOWS ===== */
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);


        --shadow-direct-light: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        --shadow-ambinent-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.24);

        /* ==== TEXT SHADOW ==== */
        --text-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
        --text-shadow-base: 0 1px 3px rgba(0, 0, 0, 0.1),
                            0 1px 2px rgba(0, 0, 0, 0.06);
        --text-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
                        0 4px 6px rgba(0, 0, 0, 0.05);
        --text-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
                        0 10px 10px rgba(0, 0, 0, 0.04);


        /* ===== TRANSITIONS ===== */
        --transition-fast: 150ms ease;
        --transition-base: 300ms ease;
        --transition-slow: 500ms ease;


        /* Landing Page Color */
        --landing-100: #C15F3C; /* 0.3 opacity */
        --landing-200: #E67E22; /* 0.8 opacity */
        --landing-300: #D35400; /* 1 opacity */
        --landing-400: #5D4E37; /* 0.2 opacity */
        --landing-500: #FDB462;
        --landing-600: #F39C12;

    }