/* LITORRA design system — tokens and shared components (docs: _src/docs/AUDIT_DESIGN.md §3).
   Loaded LAST on every page: the legacy variables of styles.css, brand.css, premium.css and v1.css become aliases
   of these tokens, and the shared components below give every page generation the same buttons, eyebrows,
   headings, focus, FAQ, breadcrumb and footer. New styles use the --c-/--t-/--s-/--r- tokens, never raw values. */
/* Fonts: declared once, in styles.css and brand.css (WOFF2 subsets, TTF fallback). */

:root{
  /* colours — brand chalk, charcoal and earth; fewer shades */
  --c-bg:#F4F1E9; --c-surface:#FBF9F4; --c-surface-2:#EAE6DC; --c-line:#D8D1C4;
  --c-ink:#252724; --c-ink-2:#4E4A44; --c-ink-3:#6B655C;
  --c-accent:#A96045; --c-accent-ink:#8A4A33; --c-dark:#1F201D; --c-on-dark:#F4F1E9; --c-on-dark-2:#CFC8BB;
  --c-ok:#2F6B47; --c-warn:#8A6414; --c-error:#9B2C1F;
  /* type */
  --f-serif:Cormorant,Georgia,serif; --f-sans:Manrope,Arial,sans-serif; --f-arabic:"Noto Sans Arabic",Manrope,sans-serif;
  --t-display:clamp(2.5rem,1.7rem + 3.4vw,4.5rem); --t-h2:clamp(1.875rem,1.45rem + 1.8vw,2.75rem); --t-h3:clamp(1.3125rem,1.2rem + .45vw,1.5rem);
  --t-lead:clamp(1.125rem,1.07rem + .25vw,1.25rem); --t-body:1rem; --t-small:.875rem; --t-eyebrow:.75rem;
  /* space, layout, shape, motion */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section:clamp(64px,7vw,112px); --gutter:clamp(20px,4vw,40px); --w-text:68ch; --w-page:1240px;
  --r-0:0; --r-1:12px; --r-full:999px;
  --sh-1:0 10px 24px rgba(37,39,36,.08); --sh-2:0 18px 40px rgba(37,39,36,.16);
  --ease:cubic-bezier(.2,.7,.2,1); --dur-1:180ms; --dur-2:320ms;
  --tap:44px;
  /* legacy aliases (styles.css, brand.css, premium.css, v1.css): one source of truth */
  --ivory:var(--c-bg); --paper:var(--c-surface-2); --line:var(--c-line); --ink:var(--c-ink); --stone:var(--c-ink-3);
  --serif:var(--f-serif); --sans:var(--f-sans);
  --v1-serif:var(--f-serif); --v1-muted:var(--c-ink-2); --v1-accent:var(--c-accent);
  --premium-serif:var(--f-serif); --premium-muted:var(--c-ink-2); --premium-dark:var(--c-dark);
  --brand-chalk:var(--c-bg); --brand-charcoal:var(--c-ink); --brand-earth:var(--c-accent);
}

/* ---------- base */
.v1{--v1-serif:var(--f-serif);--v1-muted:var(--c-ink-2);--v1-accent:var(--c-accent)}
@media (max-width:899px){.v1{padding-inline:var(--gutter)}}
body{background:var(--c-bg);color:var(--c-ink);font-family:var(--f-sans)}
html[lang=ar] body,[lang=ar]{font-family:var(--f-arabic)}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---------- headings: one scale for every page generation */
.v1 h1,#main h1{font-family:var(--f-serif);font-weight:500;font-size:var(--t-display);line-height:1.02;letter-spacing:-.015em}
.v1 h2,#main h2{font-family:var(--f-serif);font-weight:500;font-size:var(--t-h2);line-height:1.08;letter-spacing:-.01em}
.v1 h3,#main h3{font-family:var(--f-serif);font-weight:600;font-size:var(--t-h3);line-height:1.2}
.v1-lead,.v2-hero-copy .v1-lead{font-size:var(--t-lead);line-height:1.55;color:var(--c-ink-2)}
.v1-home-hero h1,.v2-hero-copy h1{font-size:var(--t-display);line-height:1.02;letter-spacing:-.015em}

/* ---------- eyebrow: one style, 12 px, one line */
.eyebrow,.v1-tag,.live-eyebrow,.product-tag,.range-badge{font-family:var(--f-sans);font-size:var(--t-eyebrow);font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
main .eyebrow,.v1 .eyebrow{color:var(--c-accent-ink)}
.v1-band-dark .eyebrow,footer .eyebrow,.live-cta .live-eyebrow{color:#E0A68C}

/* ---------- secondary text: AA contrast */
.v1-hint,.v1-optional,.v1-crumb,.v1-note{color:var(--c-ink-2)}

/* ---------- buttons: square, 52 px, three variants */
.button{min-height:52px;border-radius:var(--r-0);font-family:var(--f-sans);font-size:15px;font-weight:700;letter-spacing:.01em;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.button:not(.secondary):not(.light):hover{background:#3A3C38}
.v1-link{color:var(--c-ink);text-decoration-color:var(--c-accent);text-underline-offset:4px}
.v1-link:hover{color:var(--c-accent-ink)}

/* ---------- breadcrumb: comfortable targets, one line on mobile */
.v1-crumb{font-size:var(--t-small)}
.v1-crumb a{display:inline-flex;align-items:center;min-height:var(--tap)}
@media (max-width:599px){.v1-crumb{white-space:nowrap;overflow-x:auto;scrollbar-width:none;margin-bottom:var(--s-2)}.v1-crumb::-webkit-scrollbar{display:none}}

/* ---------- FAQ: brand accordion */
.v2-faq details{padding:0}
.v2-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:56px;padding:var(--s-3) 0;font-weight:600;font-size:var(--t-body)}
.v2-faq summary::-webkit-details-marker{display:none}
.v2-faq summary::after{content:"+";flex:none;font:400 26px/1 var(--f-serif);color:var(--c-accent-ink);transition:transform var(--dur-1) var(--ease)}
.v2-faq details[open] summary::after{content:"−"}
.v2-faq details p{margin:0 0 var(--s-4)}

/* ---------- form choices: 44 px targets */
.v2-wa-want label,.lg-radio,.v1-radio{display:flex;align-items:center;gap:var(--s-2);min-height:var(--tap)}

/* ---------- colour swatches: one scrolling row on mobile */
@media (max-width:599px){
  .v2-swatches{display:flex;overflow-x:auto;gap:var(--s-3);scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);padding:0 0 var(--s-2);margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:thin}
  .v2-swatches>li{flex:0 0 104px;scroll-snap-align:start}
}
.v2-dot{border-radius:var(--r-1)}

/* ---------- cards */
.v2-board-img,.v2-live-frame{border-radius:var(--r-1)}

/* ---------- product page: image first on mobile, sticky actions */
.v2-hero-media img.v2-pot{position:absolute;left:-24px;bottom:24px;width:28%;max-width:200px;height:auto;aspect-ratio:auto;border:4px solid var(--c-surface);border-radius:var(--r-0);box-shadow:var(--sh-2);background:var(--c-surface)}
@media (max-width:899px){
  .v2-hero{display:flex;flex-direction:column}
  .v2-hero-media{order:-1;margin-inline:calc(var(--gutter) * -1)}
  .v2-hero-media img:not(.v2-pot){aspect-ratio:4/3.4}
  .v2-hero-media img.v2-pot{left:var(--gutter);bottom:-28px;width:112px;border:3px solid var(--c-surface);border-radius:var(--r-0)}
  .v2-hero-copy{padding-top:var(--s-5)}
  .v2-hero-copy .v1-cta{display:none}
  body[data-v1-page=product]{padding-bottom:84px}
}
.v2-sticky{display:none}
@media (max-width:899px){
  .v2-sticky{display:flex;gap:var(--s-2);position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));background:var(--c-surface);border-top:1px solid var(--c-line);box-shadow:0 -8px 24px rgba(37,39,36,.06)}
  .v2-sticky .button{flex:1 1 0;min-height:52px;padding:0 var(--s-3);font-size:14px}
}
.v2-tech-note{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-5);border:1px solid var(--c-line);background:var(--c-surface);font-size:var(--t-small);color:var(--c-ink-2)}

/* ---------- home: image first on mobile */
@media (max-width:899px){.v1-home-hero{display:flex;flex-direction:column}.v1-home-hero-media{order:-1;margin-inline:calc(var(--gutter) * -1)}.v1-home-hero-media img{aspect-ratio:4/3}}

/* ---------- footer: no horizontal scroll, 44 px links, readable catalogue list */
footer{overflow:hidden}
.footer-bottom{flex-wrap:wrap;row-gap:var(--s-4)}
.footer-bottom div{flex-wrap:wrap;column-gap:var(--s-5);row-gap:0}
.footer-bottom a,.footer-catalogues a{display:inline-flex;align-items:center;min-height:var(--tap)}
.footer-top p{font-family:var(--f-serif)}

/* ---------- header: the same layout on every page generation (logo, menu next to it, action on the right) */
@media (min-width:900px){.header .brand img{width:170px;height:auto}.header{justify-content:flex-start}.header #navigation{margin-left:var(--s-5)}.header .header-contact{margin-left:auto}}