/* ========== CSS Variables ========== */
:root {
    /* NEUTRALS */
    --color-black: #000000;
    --color-black-95: rgba(0, 0, 0, 0.95);
    --color-gray-900-cool: #292F35;
    --color-gray-900-warm: #333333;
    --color-gray-900-warm-30: rgba(51, 51, 51, 0.3);
    --color-gray-800-80: rgba(42, 51, 61, 0.8);
    --color-gray-700-warm: #5E5E5E;
    --color-gray-700-cool: #526069;
    --color-gray-700-cool-40: rgba(82, 96, 105, 0.4);
    --color-gray-600: #7D7D7D;
    --color-gray-500: #959595;
    --color-gray-200: #EDEDED;
    --color-gray-100: #F8F8F6;
    --color-white: #FFFFFF;
    --color-white-95: rgba(255, 255, 255, 0.95);

    /* BLUE */
    --color-blue-900: #273B7D;
    --color-blue-800: #265487;
    --color-blue-700: #294F6A;
    --color-blue-500: #4C90C8;
    --color-blue-300: #88B643;
    --color-blue-200: #56EEFF;
    --color-blue-teal: #6B96A3;

    /* GREEN */
    --color-green-700: #457D76;
    --color-green-500: #009962;
    --color-green-200: #5FEC7E;
    --color-green-100: #D3EBE5;

    /* ACCENT */
    --color-purple-700: #5F5DA9;
    --color-purple-300: #9D9DDC;
    --color-orange-500: #FF8123;
    --color-yellow-300: #F6E764;
    --color-red-500: #DF1047;
    --color-pink-100: #FBE9E9;

    /* Spacing */
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 24px;
    --spacing-6: 32px;
    --spacing-7: 40px;
    --spacing-8: 48px;
    --spacing-9: 64px;
    --spacing-10: 72px;

    /* Radius */
    --radius-1: 4px;
    --radius-2: 8px;
    --radius-3: 16px;
    --radius-4: 32px;
    --radius-button: 100px;

    /* Shadows */
    --shadow-header: 0px 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-header-dark-dropdown: 0px 12px 48px rgba(255, 255, 255, 0.1);
    --shadow-header-light-dropdown: 0px 12px 25px rgba(0, 0, 0, 0.2);
    --shadow-mode-dark-image: 3px 3px 9px rgba(255, 255, 255, 0.18);
    --shadow-product-default: 2px 2px 5px rgba(0, 0, 0, 0.25);
    --shadow-product-hover: 5px 7px 10px rgba(0, 0, 0, 0.17);
    --shadow-side-bar: 2px 0px 7px rgba(0, 0, 0, 0.25);
    --shadow-card: 2px 2px 10px rgba(0, 0, 0, 0.25);
    --shadow-subtitle-light: 3px 3px 0px rgba(255, 255, 255, 1);
    --shadow-subtitle-dark: 3px 3px 0px rgba(51, 51, 51, 1);
    --shadow-text-light: 0px 0px 3px rgba(255, 255, 255, 0.95);
    --shadow-inner: inset 0px 4px 4px rgba(37, 84, 135, 1);

    /* Font Family */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-special: 'Alumni Sans SC', sans-serif;
    --font-thai: 'Kantumruy', sans-serif;
    --font-afacad: 'Afacad', sans-serif;

    /* Effects */
    --blur-bg: 5px;

    /* Container */
    --container-max-width: 1200px;
    --container-padding: 24px;
}