/* =============================================================
   Ashline Bridal Dress Rental — monochrome theme.
   Architecture, radii, spacing, shadows, component recipes all
   inherited from shadcn/ui (new-york-v4). The neutral achromatic
   token ramp is re-mapped to a warm ivory / champagne / charcoal
   palette in oklch — the SAME color space shadcn uses — so the
   structure stays canonical while the brand reads premium-boutique.
   ============================================================= */

/* ---------- Geist (self-hosted, shadcn default body/UI face) ---------- */
@font-face{font-family:"Geist";src:url("../fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Geist";src:url("../fonts/Geist-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --font-sans:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* Editorial serif for display headings — the boutique voice */
  --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,monospace;

  /* radii — straight from shadcn */
  --radius:0.625rem;
  --radius-sm:calc(var(--radius)*0.6);
  --radius-md:calc(var(--radius)*0.8);
  --radius-lg:var(--radius);
  --radius-xl:calc(var(--radius)*1.4);
  --radius-2xl:calc(var(--radius)*1.8);
  --radius-3xl:calc(var(--radius)*2.2);

  /* ---------- Modern palette (cool neutrals + sage accent) ---------- */
  --background:oklch(0.992 0.001 265);    /* clean cool white */
  --foreground:oklch(0.23 0.006 270);     /* cool near-black */

  --card:oklch(1 0 0);
  --card-foreground:var(--foreground);
  --popover:oklch(1 0 0);
  --popover-foreground:var(--foreground);

  --primary:oklch(0.26 0.008 270);        /* cool charcoal — primary buttons */
  --primary-foreground:oklch(0.99 0.001 265);

  --secondary:oklch(0.962 0.003 265);     /* cool light gray */
  --secondary-foreground:oklch(0.30 0.007 270);

  --muted:oklch(0.966 0.003 265);
  --muted-foreground:oklch(0.445 0.008 268);

  --accent:oklch(0.955 0.004 265);
  --accent-foreground:oklch(0.30 0.008 270);

  --surface:oklch(0.973 0.003 265);       /* soft cool sections */
  --surface-foreground:var(--foreground);

  --border:oklch(0.912 0.004 265);        /* light cool gray */
  --input:oklch(0.90 0.004 265);
  --ring:oklch(0.42 0.006 270);

  --destructive:oklch(0.55 0.16 28);
  --destructive-foreground:oklch(0.98 0.01 84);

  /* black — the single modern brand accent (monochrome) */
  --gold:oklch(0.23 0.006 270);
  --gold-deep:oklch(0.15 0.004 270);     /* near-black — AA everywhere */
  --gold-soft:oklch(0.945 0.002 265);
  --blush:oklch(0.9 0.003 265);           /* soft gray — neutral counter-accent */

  --selection:oklch(0.23 0.006 270);
  --selection-foreground:oklch(0.99 0.001 265);

  /* spacing + shadows — shadcn, cooled */
  --shadow-xs:0 1px 2px 0 oklch(0.3 0.02 265 / 0.06);
  --shadow-sm:0 1px 3px 0 oklch(0.3 0.02 265 / 0.09),0 1px 2px -1px oklch(0.3 0.02 265 / 0.08);
  --shadow-md:0 4px 14px -3px oklch(0.3 0.02 265 / 0.11),0 2px 6px -3px oklch(0.3 0.02 265 / 0.08);
  --shadow-lg:0 16px 36px -10px oklch(0.3 0.02 265 / 0.15),0 6px 14px -8px oklch(0.3 0.02 265 / 0.10);
  --shadow-xl:0 28px 60px -14px oklch(0.28 0.02 265 / 0.22);
  --ring-50:color-mix(in oklab,var(--ring) 50%,transparent);
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden}
@media(prefers-reduced-motion:no-preference) and (hover:hover){html{scroll-behavior:smooth}}
html,body{
  background:var(--background);color:var(--foreground);
  max-width:100vw;
  font-family:var(--font-sans);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-synthesis-weight:none;
}
body{font-size:16px;line-height:1.7}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:transparent;border:0}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--selection);color:var(--selection-foreground)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:9999px;border:3px solid var(--background)}

/* ---------- Display typography ---------- */
.serif{font-family:var(--font-display);font-weight:500;letter-spacing:0.005em}
.eyebrow{
  font-family:var(--font-sans);font-size:11.5px;font-weight:600;
  letter-spacing:0.22em;text-transform:uppercase;color:var(--gold-deep);
}
.disp-xl{font-family:var(--font-display);font-weight:500;line-height:1.02;letter-spacing:0.004em;
  font-size:clamp(2.8rem,7vw,5.5rem)}
.disp-lg{font-family:var(--font-display);font-weight:500;line-height:1.06;letter-spacing:0.004em;
  font-size:clamp(2.2rem,4.5vw,3.6rem)}
.disp-md{font-family:var(--font-display);font-weight:500;line-height:1.12;letter-spacing:0.006em;
  font-size:clamp(1.7rem,3vw,2.4rem)}
.lede{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.7;color:var(--muted-foreground)}

/* ---------- Buttons (shadcn recipe, warm tokens) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 22px;border-radius:9999px;font-size:14px;font-weight:500;
  letter-spacing:0.01em;border:1px solid transparent;transition:all .18s ease;
  white-space:nowrap;flex-shrink:0;
}
.btn:focus-visible{outline:none;border-color:var(--ring);box-shadow:0 0 0 3px var(--ring-50)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:oklch(0.34 0.008 270);transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:oklch(0.99 0.001 265)}
.btn-gold:hover{background:var(--gold-deep);color:oklch(0.99 0.001 265);transform:translateY(-1px)}
.btn-outline{background:transparent;border-color:var(--border);color:var(--foreground)}
.btn-outline:hover{background:var(--accent);border-color:var(--gold)}
.btn-ghost{background:transparent;color:var(--foreground)}
.btn-ghost:hover{background:var(--accent)}
.btn-ink-outline{background:transparent;border-color:oklch(0.99 0.001 265 / .55);color:#fff}
.btn-ink-outline:hover{background:oklch(0.99 0.001 265 / .14);border-color:#fff}
.btn-lg{height:52px;padding:0 30px;font-size:15px}
.btn-sm{height:36px;padding:0 16px;font-size:13px}
.btn-icon{width:44px;height:44px;padding:0;border-radius:9999px}
.btn-icon.btn-sm{width:36px;height:36px}
.btn-block{width:100%}
/* Hero primary CTA: white on photo so it stays visible over dark imagery */
.hero-cta .btn-gold{background:#fff;color:var(--foreground)}
.hero-cta .btn-gold:hover{background:oklch(0.93 0.002 265);color:var(--foreground)}
/* Arrow slide on hover — last svg inside button slides right */
.btn svg:last-child:not(:first-child),.link-arrow svg{transition:transform .2s ease}
.btn:hover svg:last-child:not(:first-child),.link-arrow:hover svg{transform:translateX(4px)}

/* ---------- Badge ---------- */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:9999px;
  font-size:11px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;
  line-height:1.3;border:1px solid transparent;backdrop-filter:saturate(1.2);
}
.badge-sale{background:var(--destructive);color:#fff}
.badge-best{background:var(--primary);color:var(--primary-foreground)}
.badge-new{background:var(--gold);color:oklch(0.99 0.001 265)}
.badge-soft{background:oklch(0.99 0.001 265 / .9);color:var(--foreground);border-color:var(--border)}

/* ---------- Card ---------- */
.card{
  background:var(--card);color:var(--card-foreground);
  border:1px solid var(--border);border-radius:var(--radius-xl);
}

/* ---------- Input / field ---------- */
.input,.textarea{
  width:100%;padding:0 14px;height:46px;background:var(--card);
  border:1px solid var(--input);border-radius:9999px;font-size:14.5px;
  color:var(--foreground);transition:all .15s;
}
.textarea{border-radius:var(--radius-lg);height:auto;padding:12px 14px;resize:vertical;line-height:1.6}
.input::placeholder,.textarea::placeholder{color:var(--muted-foreground)}
.input:focus,.textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--ring-50)}
.label{font-size:13px;font-weight:500;letter-spacing:0.01em}

/* ---------- Layout helpers ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 24px}
.row{display:flex;align-items:center;gap:12px}
.col{display:flex;flex-direction:column}
.sep{height:1px;background:var(--border);width:100%}
.hair{height:1px;background:linear-gradient(90deg,transparent,var(--border),transparent)}
.section{padding-top:clamp(56px,9vw,116px);padding-bottom:clamp(56px,9vw,116px);overflow-x:clip}
.section.wrap-wide{padding-left:24px;padding-right:24px}
@media(max-width:759px){.section{overflow-x:clip}}
.section-soft{background:var(--surface)}

/* gold rule used under eyebrows / headings */
.rule-gold{width:42px;height:2px;background:var(--gold);border-radius:2px}

/* ---------- Reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- Accordion ---------- */
.acc-item{border-bottom:1px solid var(--border)}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:22px 4px;text-align:left;font-size:16px;font-weight:500}
.acc-head .chev{transition:transform .25s;color:var(--gold-deep);flex-shrink:0}
.acc-item.open .chev{transform:rotate(180deg)}
.acc-body{overflow:hidden;height:0;transition:height .28s cubic-bezier(.4,0,.2,1)}
.acc-body-inner{padding:0 4px 24px;color:var(--muted-foreground);line-height:1.75;max-width:64ch}

svg.lc{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none;display:inline;vertical-align:middle;flex-shrink:0}

/* ---------- Accessibility: focus, skip link, reduced motion ---------- */
a:focus-visible,button:focus-visible,
select:focus-visible,[tabindex]:focus-visible,[role="button"]:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;border-radius:6px;
}
input:focus-visible,textarea:focus-visible{
  outline:none;/* handled by .input/.textarea focus rules with box-shadow */
}
.skip-link{
  position:fixed;top:8px;left:8px;z-index:200;background:var(--primary);color:var(--primary-foreground);
  padding:10px 18px;border-radius:9999px;font-size:13px;font-weight:600;
  transform:translateY(-160%);transition:transform .2s;
}
.skip-link:focus{transform:none;outline:2px solid var(--gold);outline-offset:2px}
#main:focus{outline:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}