/* ==========================================================================
   FABRIQ STAR — Design Tokens
   A premium aso-ebi & bridal fashion house.
   Palette pulled from the fabric itself: antique gold thread, deep emerald
   aso-ebi, warm ivory linen, espresso ink, and a wine accent for rare notes.
   ========================================================================== */

:root{
  /* ---- Color: Ink & Paper ---- */
  --ink:            #1B1512;   /* near-black, warm charcoal — headings, footer */
  --ink-soft:       #362C25;
  --paper:          #FBF7F0;   /* warm ivory background */
  --paper-dim:      #F3ECDF;   /* slightly deeper ivory for section breaks */
  --sand:           #E9E1D3;   /* card / divider surface */
  --sand-line:      #DCD0B8;   /* hairline borders */

  /* ---- Color: Accents drawn from aso-ebi textiles ---- */
  --gold:           #A9782F;   /* antique gold thread — primary accent */
  --gold-deep:      #7C591F;
  --gold-light:     #D9B770;
  --emerald:        #1F3D31;   /* deep aso-ebi emerald — secondary accent */
  --emerald-soft:   #2E5645;
  --wine:           #6B1F2A;   /* rare accent — sale badges, sold out */
  --cream-text:     #F7F1E4;

  /* ---- Type ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-xs:   .72rem;
  --text-sm:   .84rem;
  --text-base: 1rem;
  --text-md:   1.15rem;
  --text-lg:   1.5rem;
  --text-xl:   2.1rem;
  --text-2xl:  3rem;
  --text-3xl:  4.4rem;
  --text-4xl:  6vw;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---- Spacing scale ---- */
  --sp-1: .4rem;
  --sp-2: .8rem;
  --sp-3: 1.4rem;
  --sp-4: 2.2rem;
  --sp-5: 3.6rem;
  --sp-6: 5.6rem;
  --sp-7: 8.5rem;

  /* ---- Shape / Motion ---- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --ease: cubic-bezier(.22,.85,.32,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --dur-1: .35s;
  --dur-2: .6s;
  --dur-3: .9s;

  --shadow-card: 0 1px 2px rgba(27,21,18,.04), 0 12px 32px -18px rgba(27,21,18,.22);
  --shadow-lift: 0 24px 60px -20px rgba(27,21,18,.35);
  --container: 1360px;
}

@media (max-width: 768px){
  :root{
    --text-3xl: 2.6rem;
    --text-2xl: 2.05rem;
    --text-xl: 1.6rem;
    --sp-6: 3.6rem;
    --sp-7: 4.8rem;
  }
}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

::selection{ background:var(--gold); color:var(--cream-text); }

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

.container{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(1.25rem,4vw,3rem); }

.eyebrow{
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wider);
  text-transform:uppercase;
  color:var(--gold-deep);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:'';
  width:22px; height:1px;
  background:var(--gold-deep);
  display:inline-block;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  margin:0;
  letter-spacing:-.01em;
}
h2{ font-size:var(--text-2xl); }
h3{ font-size:var(--text-lg); }
p{ margin:0; }

.italic{ font-style:italic; font-family:var(--font-display); }

/* ---- Thread motif (signature element) ----
   A hairline + small diamond mark used as the site's recurring signature,
   echoing the woven thread the brand is named for. */
.thread{
  display:flex; align-items:center; gap:var(--sp-2);
  color:var(--gold);
}
.thread::before,.thread::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, currentColor, transparent);
}
.thread .diamond{
  width:7px; height:7px; transform:rotate(45deg);
  background:currentColor; flex:none;
}
.thread--left::before{ display:none; }
.thread--left{ justify-content:flex-start; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding: 1.05em 2.1em;
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  font-weight:600;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn::before{
  content:'';
  position:absolute; inset:0;
  background:var(--gold);
  transform:translateY(101%);
  transition: transform var(--dur-2) var(--ease);
  z-index:-1;
}
.btn:hover::before{ transform:translateY(0); }
.btn:hover{ border-color:var(--gold); color:var(--ink); }

.btn--ghost{
  background:transparent; color:var(--ink); border-color:var(--ink);
}
.btn--ghost::before{ background:var(--ink); }
.btn--ghost:hover{ color:var(--paper); border-color:var(--ink); }

.btn--light{
  background:transparent; color:var(--paper); border-color:rgba(251,247,240,.6);
}
.btn--light::before{ background:var(--paper); }
.btn--light:hover{ color:var(--ink); border-color:var(--paper); }

.btn--sm{ padding:.85em 1.6em; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; }
.btn[disabled]:hover::before{ transform:translateY(101%); }

/* Ripple micro-interaction */
.ripple{ position:relative; overflow:hidden; }
.ripple-el{
  position:absolute; border-radius:50%; pointer-events:none;
  background:rgba(255,255,255,.55);
  transform:scale(0); animation:ripple-anim .6s var(--ease-soft);
}
@keyframes ripple-anim{ to{ transform:scale(2.6); opacity:0; } }

/* Reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger > * { transition-delay: calc(var(--i,0) * 80ms); }

.skeleton{
  background:linear-gradient(100deg, var(--sand) 8%, var(--paper-dim) 18%, var(--sand) 33%);
  background-size:200% 100%;
  animation:shimmer 1.4s linear infinite;
}
@keyframes shimmer{ to{ background-position:-200% 0; } }

.badge{
  position:absolute; top:14px; left:14px;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.45em .85em; font-weight:700;
  background:var(--paper); color:var(--ink); z-index:2;
}
.badge--sale{ background:var(--wine); color:var(--cream-text); }
.badge--sold{ background:var(--ink-soft); color:var(--cream-text); }
.badge--new{ background:var(--emerald); color:var(--cream-text); }

.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap;
}

.skip-link{
  position:fixed; top:-60px; left:1rem; background:var(--ink); color:var(--paper);
  padding:.8em 1.4em; z-index:9999; transition:top .2s;
}
.skip-link:focus{ top:1rem; }