:root {
    --color-primary: rgb(18, 146, 71);
    --color-secondary: #23501e;
    --color-tertiary: #d4af37;
    /* ===== BASE ===== */
    --color-black: #000000;

    /* ===== WHITE SCALE ===== */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;

    --white-90: rgba(var(--white-rgb), 0.9);
    --white-70: rgba(var(--white-rgb), 0.7);
    --white-50: rgba(var(--white-rgb), 0.5);
    --white-30: rgba(var(--white-rgb), 0.3);
    --white-10: rgba(var(--white-rgb), 0.1);

    --color-white: rgba(var(--white-rgb));
    --color-gray-100: #e5e5e5;
    --color-gray-300: #bfbfbf;
    --color-gray-500: #808080;
    --color-gray-700: #4d4d4d;
    --color-gray-900: #1a1a1a;

    /* ===== BRAND COLORS ===== */
    --color-pink: #f3a6ff;
    --color-purple: #a855f7;
    --color-green: #00ff88;
    --color-red: #ff2d2d;
    --color-yellow: #facc15;

    /* ===== TEXT ===== */
    --text-primary: var(--color-black);
    --text-secondary: var(--color-gray-900);
    --text-muted: var(--color-gray-500);

    /* ===== BACKGROUND ===== */
    --bg-primary: var(--color-white);
    --bg-secondary: #f5f5f5;

    /* ===== UI ===== */
    --border-color: var(--white-70);
    --cursor-color: var(--color-white);
    /* ===== TYPOGRAPHY ===== */
    --font-primary: 'Manrope', sans-serif;
    --font-heading: 'Manrope', sans-serif;

    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 20px;
    --text-xl: 32px;
    --text-2xl: 48px;
    --text-hero: clamp(40px, 8vw, 120px);

    /* ===== SPACING ===== */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 40px;
    --space-xl: 80px;

    /* ===== BORDER RADIUS ===== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-full: 999px;

    /* ===== TRANSITION ===== */
    --transition: .45s transform .2s cubic-bezier(.55, 0, .1, 1), .6s color cubic-bezier(.55, 0, .1, 1);;

}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scrollbar-width: none;
    scroll-behavior: auto;
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #F8F9FA;
}

::-webkit-scrollbar-thumb {
    background: #E5E7EB;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #135bec;
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    line-height: 1.5;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin: 0;
}

a {
    font-family: var(--font-primary);
    text-decoration: none;
    color: inherit;
}
input, textarea{
    font-family: var(--font-primary);
}
button {
    font-family: var(--font-primary);
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    pointer-events: auto;
    cursor: pointer;
}

input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: none;
    border-radius: 0;
    outline: none;
    pointer-events: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    -webkit-text-fill-color: var(--color-black);
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

.product-3d-shadow {
    filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.15));
}