/* global.css */

/* 1. Import Fonts (Manrope for headings, Inter for body) */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&family=Inter:wght@300;400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* 2. Define Brand Variables (The "Source of Truth") */
:root {
    --color-primary: #008066;       /* The "NadEssence Teal" */
    --color-primary-dark: #006350;
    --color-bg-light: #f5f8f8;
    --color-bg-dark: #0f231f;
    --color-text-main: #101817;
    --color-text-light: #e0e8e6;
}

/* 3. Base Resets */
body {
    font-family: 'Inter', sans-serif;
    color: var(--color-text-main);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Manrope', sans-serif;
}

/* 4. Dark Mode Support */
body.dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
}

/* 5. Custom Utilities (Extracted from your code.html) */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 20px;
}
body.dark ::-webkit-scrollbar-thumb {
    background-color: #2d4a45;
}

/* shape utility from shop.html */
.custom-shape-bg {
    clip-path: circle(75% at 85% 50%);
}