/* ============================================================
   AYURCALL — site.css
   CSS custom properties, reset, base typography, utilities
   Change the font once here — updates the entire site.
   ============================================================ */

/* ---- DESIGN TOKENS ---- */
:root {

    /* Brand colours — change here, updates everywhere */
    --color-primary:        #1D7A78;
    --color-primary-dark:   #165E5C;
    --color-primary-light:  #E9F5F4;
    --color-accent:         #E59E0B;
    --color-accent-light:   #FFFDF0;

    /* Text */
    --color-text-primary:   #1A1A1A;
    --color-text-secondary: #555555;
    --color-text-muted:     #888888;

    /* Surfaces */
    --color-surface:        #FFFFFF;
    --color-bg:             #F5F5F5;
    --color-border:         #E8E8E8;

    /* Spacing — 4px base unit, multiples only */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;

    /* Border radius */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 9999px;

    /* Typography — change font-family here only */
    --font-family:        'Inter', system-ui, -apple-system, sans-serif;
    --font-size-hero:     28px;
    --font-size-section:  20px;
    --font-size-card:     15px;
    --font-size-body:     14px;
    --font-size-small:    12px;
    --font-size-label:    11px;
    --font-size-price:    16px;
    --font-size-micro:    10px;

    /* Layout */
    --max-width:  1440px;   /* matches max-width used in layout.css */
    --nav-height: 56px;

    /* Z-index scale */
    --z-base:     1;
    --z-dropdown: 100;
    --z-nav:      200;
    --z-modal:    300;

    /* Transitions */
    --transition: 0.2s ease;
}

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

/* Ensure the HTML hidden attribute is always respected,
   even when a parent rule sets display:flex or display:grid */
[hidden] { display: none !important; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-body);
    color: var(--color-text-primary);
    background: var(--color-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img  { max-width: 100%; display: block; }
a    { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
ul, ol { list-style: none; }

/* ---- TYPOGRAPHY UTILITIES ---- */
.text-hero    { font-size: var(--font-size-hero);    font-weight: 500; line-height: 1.2; }
.text-section { font-size: var(--font-size-section); font-weight: 500; line-height: 1.3; }
.text-card    { font-size: var(--font-size-card);    font-weight: 500; line-height: 1.35; }
.text-body    { font-size: var(--font-size-body);    font-weight: 400; line-height: 1.6; }
.text-small   { font-size: var(--font-size-small);   font-weight: 400; line-height: 1.5; }
.text-label   { font-size: var(--font-size-label);   font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; }
.text-price   { font-size: var(--font-size-price);   font-weight: 600; line-height: 1; }
.text-micro   { font-size: var(--font-size-micro);   font-weight: 400; }

.text-primary   { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted     { color: var(--color-text-muted); }
.text-accent    { color: var(--color-accent); }
.text-brand     { color: var(--color-primary); }
.text-white     { color: #fff; }

/* ---- LINE CLAMP — prevents card text overflow ---- */
.clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- HORIZONTAL SCROLL (mobile product rows) ---- */
.scroll-x {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.scroll-x::-webkit-scrollbar { display: none; }

/* ---- SCREEN READER ONLY ---- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}