/* =============================================================================
   Gitanjali Handlooms — design tokens
   Heritage-minimal: raw-linen ground, charcoal ink, antique brass & maroon accents.
   Import first in every stylesheet (store + admin + email previews).
   ============================================================================= */

/* Fonts are loaded by a <link> in the page head (faster than an @import here).
   Keep the same two families if you change them: Cormorant Garamond + Inter. */

:root {
    /* Ground */
    --gh-ivory:        #FAF7F2;   /* page background */
    --gh-linen:        #F5EFEB;   /* section / card alt */
    --gh-white:        #FFFFFF;

    /* Ink */
    --gh-charcoal:     #1F1F1F;   /* headings, primary buttons */
    --gh-ink:          #2B2B2B;   /* body text */
    --gh-slate:        #5C5C5C;   /* secondary text */
    --gh-muted:        #8A8378;   /* captions, placeholders */

    /* Heritage accents */
    --gh-brass:        #C39D63;   /* rules, eyebrow labels, highlights */
    --gh-brass-soft:   #E9DCC3;
    --gh-maroon:       #FF2C2C;   /* sale price, badges, links */
    --gh-maroon-dark:  #D92525;

    /* Lines */
    --gh-border:       #E6DFC5;
    --gh-border-strong:#D4C9A8;
    --gh-line:         1px solid var(--gh-border);

    /* Product imagery — photograph sarees at 1200 × 1700 px (12:17 portrait).
       Change these two lines to restyle every product image at once:
       set --gh-radius-img to 0 for square corners. */
    --gh-ratio-product: 12 / 17;
    --gh-radius-img:    10px;

    /* Status */
    --gh-success:      #3F6B4A;
    --gh-warning:      #B7822B;
    --gh-danger:       #A3313A;

    /* Type */
    --gh-font-serif:   'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --gh-font-sans:    'Inter', 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --gh-fs-xs:        0.75rem;
    --gh-fs-sm:        0.875rem;
    --gh-fs-base:      1rem;
    --gh-fs-lg:        1.25rem;
    --gh-fs-xl:        1.75rem;
    --gh-fs-2xl:       clamp(2rem, 1.4rem + 2.5vw, 3.25rem);
    --gh-fs-hero:      clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
    --gh-tracking-wide: 0.18em;   /* uppercase eyebrow labels */

    /* Space (generous whitespace) */
    --gh-space-1: 0.25rem;
    --gh-space-2: 0.5rem;
    --gh-space-3: 0.75rem;
    --gh-space-4: 1rem;
    --gh-space-6: 1.5rem;
    --gh-space-8: 2rem;
    --gh-space-12: 3rem;
    --gh-space-16: 4rem;
    --gh-space-24: 6rem;

    /* Shape & motion
       Curves for the whole shop, in one place. Set all four to 0 and every
       button, field, card and panel goes back to square corners. */
    --gh-radius-sm:    6px;       /* badges, pills, small controls, table cells */
    --gh-radius:       8px;       /* buttons, inputs, selects, cards */
    --gh-radius-lg:    12px;      /* panels, boxes, drawers, dialogs */
    --gh-container:    1320px;
    --gh-ease:         cubic-bezier(.2, .7, .2, 1);
    --gh-dur:          240ms;
    --gh-shadow-drawer: -12px 0 40px rgba(31, 31, 31, .08);
}

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

/* The hidden attribute always wins over component display rules (drawers, overlays, badges). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--gh-ivory);
    color: var(--gh-ink);
    font-family: var(--gh-font-sans);
    font-size: var(--gh-fs-base);
    font-weight: 400;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--gh-font-serif);
    font-weight: 500;
    color: var(--gh-charcoal);
    line-height: 1.15;
    letter-spacing: 0.01em;
    margin: 0 0 var(--gh-space-4);
}

a { color: inherit; text-decoration-color: var(--gh-brass); text-underline-offset: 3px; }

img { max-width: 100%; height: auto; display: block; }

.gh-eyebrow {
    font-size: var(--gh-fs-xs);
    letter-spacing: var(--gh-tracking-wide);
    text-transform: uppercase;
    color: var(--gh-brass);
}

.gh-rule { width: 48px; height: 1px; background: var(--gh-brass); border: 0; margin: var(--gh-space-6) auto; }

.gh-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--gh-space-2);
    min-height: 48px; padding: 0 var(--gh-space-8);
    font: 500 var(--gh-fs-xs)/1 var(--gh-font-sans);
    letter-spacing: var(--gh-tracking-wide); text-transform: uppercase; text-decoration: none;
    border: 1px solid var(--gh-charcoal); border-radius: var(--gh-radius);
    background: var(--gh-charcoal); color: var(--gh-ivory);
    cursor: pointer; transition: background var(--gh-dur) var(--gh-ease), color var(--gh-dur) var(--gh-ease);
}
.gh-btn:hover { background: transparent; color: var(--gh-charcoal); }
.gh-btn--ghost { background: transparent; color: var(--gh-charcoal); }
.gh-btn--ghost:hover { background: var(--gh-charcoal); color: var(--gh-ivory); }
.gh-btn--danger { background: var(--gh-maroon); border-color: var(--gh-maroon); color: #fff; }
.gh-btn--danger:hover { background: var(--gh-maroon-dark); border-color: var(--gh-maroon-dark); color: #fff; }
.gh-btn--wish { background: #fff; border-color: var(--gh-charcoal); color: var(--gh-charcoal); }
.gh-btn--wish:hover { background: #FF69B4; border-color: #FF69B4; color: #fff; }
.gh-btn--wish:hover svg { stroke: #fff; fill: #fff; }
.gh-btn--wish.is-wishlisted { background: #FF69B4; border-color: #FF69B4; color: #fff; }
.gh-btn--wish.is-wishlisted svg { stroke: #fff; fill: #fff; }

:focus-visible { outline: 2px solid var(--gh-maroon); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}