/* =====================================================================
   THEME.CSS — Aarti Shingle
   Design system: reset, fonts, palette (Blush & Mauve), typography,
   buttons, section titles, and shared primitives.
   Concept: "The Atelier" — dynamic, luxurious, craft-led.
   ===================================================================== */

/* ---------- Font faces (self-hosted) -------------------------------- */
@font-face {
    font-family: "Haute Frame";
    src: url("../fonts/HauteFrame.woff2") format("woff2"),
         url("../fonts/HauteFrame.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: "Fashion";
    src: url("../fonts/Fashion.woff2") format("woff2"),
         url("../fonts/Fashion.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

/* ---------- Design tokens ------------------------------------------- */
:root {
    /* Blush & Mauve palette */
    --ivory:      #F7F2F0;
    --canvas:     #FAF6F4;
    --blush:      #EFD9DD;
    --blush-soft: #F6E9EC;
    --mauve:      #D9A7B0;
    --mauve-deep: #B98A93;
    --plum:       #784E5A;
    --ink:        #2E2428;
    --ink-soft:   #4A3D42;
    --mute:       #8C8084;
    --line:       #E6D3D7;
    --dark:       #1A1416;   /* for hero/dark sections */
    --dark-2:     #251C1F;

    /* Typographic roles */
    --font-display: "Haute Frame", "Times New Roman", serif;   /* headings */
    --font-logo:    "Fashion", Georgia, serif;                 /* logo + garment names */
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Rhythm */
    --maxw: 1440px;
    --gutter: clamp(1.25rem, 4vw, 4rem);
    --section-y: clamp(4.5rem, 9vw, 9rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --dur: 0.7s;
}

/* ---------- Reset / normalize --------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
address { font-style: normal; }

/* ---------- Type primitives ----------------------------------------- */
.eyebrow {
    font-family: var(--font-logo);
    font-size: clamp(0.72rem, 1vw, 0.82rem);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: var(--mauve-deep);
    display: inline-block;
}

/* Section title — Haute Frame, big, tracked */
.section-title {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink);
    font-size: clamp(2.4rem, 6vw, 5rem);
}
.section-title--sm { font-size: clamp(1.9rem, 4vw, 3rem); }

/* Garment / product name — Fashion face */
.garment-name {
    font-family: var(--font-logo);
    font-weight: 400;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink);
    font-size: clamp(1.15rem, 1.8vw, 1.6rem);
    line-height: 1.1;
}

.lead {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.75;
    color: var(--ink-soft);
}

/* ---------- Layout helpers ------------------------------------------ */
.wrap {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }

/* Thin rose-mauve hairline rule */
.rule {
    height: 1px;
    background: var(--line);
    border: 0;
    width: 100%;
}

/* ---------- Buttons ------------------------------------------------- */
.btn {
    --btn-bg: var(--ink);
    --btn-fg: var(--ivory);
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    font-family: var(--font-logo);
    font-size: 0.82rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 1.05em 1.9em;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bg);
    border-radius: 0;
    position: relative;
    overflow: hidden;
    transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
    z-index: 0;
}
.btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--mauve);
    transform: translateY(101%);
    transition: transform 0.5s var(--ease);
    z-index: -1;
}
.btn:hover { color: var(--ink); border-color: var(--mauve); }
.btn:hover::after { transform: translateY(0); }
.btn .arw {
    width: 1.15em;
    height: 1.15em;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("../images/arrow.svg") no-repeat center / contain;
    mask: url("../images/arrow.svg") no-repeat center / contain;
    transition: transform 0.5s var(--ease);
    flex-shrink: 0;
}
.btn:hover .arw { transform: translateX(4px); }

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    border-color: var(--ink);
}
.btn--ghost:hover { color: var(--ink); }

.btn--light {
    --btn-bg: var(--ivory);
    --btn-fg: var(--ink);
}
.btn--light::after { background: var(--mauve); }

/* Text link with animated underline */
.link-underline {
    font-family: var(--font-logo);
    font-size: 0.82rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    position: relative;
    padding-bottom: 3px;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
}
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 1px;
    background: var(--mauve-deep);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.45s var(--ease);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* Inline SVG arrow for text links */
.arw-sm {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    background-color: currentColor;
    -webkit-mask: url("../images/arrow.svg") no-repeat center / contain;
    mask: url("../images/arrow.svg") no-repeat center / contain;
    transition: transform 0.4s var(--ease);
    flex-shrink: 0;
    vertical-align: middle;
}
.link-underline:hover .arw-sm { transform: translateX(3px); }

/* ---------- Accessibility ------------------------------------------- */
.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--ink);
    color: var(--ivory);
    padding: 0.75rem 1.25rem;
    z-index: 2000;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* Utility */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}