/* ============================================================
   Luxavia — Webfonts
   ------------------------------------------------------------
   SUBSTITUTION NOTE: the Luxavia wordmark and the editorial
   headline serif are drawn in a high-contrast display serif in
   the spirit of Canela / Ogg (commercial licences). For the
   open design system we substitute Cormorant Garamond, the
   closest free high-contrast Garaldic serif on Google Fonts.
   Body / UI is set in Hanken Grotesk, a warm humanist grotesque
   standing in for Neue Haas Grotesk. Swap these @import lines
   for self-hosted @font-face rules once the licensed files are
   available.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');
/* ============================================================
   Luxavia — Colour tokens
   Warm neutral palette with natural accents. Never hard white;
   the canvas is always warm crème. Accents (sage, forest,
   bronze) are used sparingly and intentionally.
   ============================================================ */

:root {
  /* ---- Base palette ------------------------------------- */
  --cream:        #F4F0E9;  /* canvas / crème — primary background       */
  --cream-deep:   #ECE7DC;  /* alternating editorial section background   */
  --cream-raised: #FBFAF6;  /* warm off-white for cards over the canvas   */

  --sand:         #D8CEC0;  /* warm zand — soft blocks, fills             */
  --sand-soft:    #E5DDD1;  /* lighter zand for subtle tiles              */
  --sand-deep:    #C9BCA9;  /* deeper zand for borders on sand            */

  --greige:       #A99C8F;  /* brand neutral / taupe (from the logo)      */
  --greige-soft:  #C2B7AA;  /* muted labels, disabled, hairlines on cream */
  --greige-deep:  #8C7F71;  /* greige text that must read on cream        */

  --ink:          #1F1D1A;  /* inkt — primary text, wordmark              */
  --ink-soft:     #4B463F;  /* secondary text                            */
  --ink-muted:    #756E63;  /* tertiary / captions                        */

  --sage:         #8E9A7C;  /* salie groen — botanical accent             */
  --sage-deep:    #74815F;  /* sage for text / hover                      */
  --sage-tint:    #DDE2D2;  /* sage wash background                       */

  --forest:       #2F3A2E;  /* diep bos groen — dark blocks, footer       */
  --forest-soft:  #3C4A3A;  /* forest hover / raised on forest            */

  --bronze:       #C2A878;  /* brons / champagne — premium metallic       */
  --bronze-deep:  #A98D5C;  /* bronze for text / hover on light           */
  --bronze-tint:  #ECE1CC;  /* bronze wash background                     */

  --white:        #FFFFFF;  /* reserved — product photography mats only   */

  /* ---- Semantic surfaces -------------------------------- */
  --surface-canvas:   var(--cream);
  --surface-alt:      var(--cream-deep);
  --surface-raised:   var(--cream-raised);
  --surface-sand:     var(--sand);
  --surface-sand-soft:var(--sand-soft);
  --surface-contrast: var(--forest);   /* dark editorial / footer        */
  --surface-sage:     var(--sage-tint);
  --surface-bronze:   var(--bronze-tint);

  /* ---- Semantic text ------------------------------------ */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-soft);
  --text-muted:     var(--ink-muted);
  --text-label:     var(--greige-deep);   /* tracked caps labels         */
  --text-on-dark:   var(--cream);
  --text-on-dark-muted: rgba(244, 240, 233, 0.66);
  --text-accent:    var(--bronze-deep);

  /* ---- Lines & borders ---------------------------------- */
  --border-hairline: rgba(31, 29, 26, 0.10);
  --border-line:     rgba(31, 29, 26, 0.16);
  --border-strong:   rgba(31, 29, 26, 0.28);
  --border-on-dark:  rgba(244, 240, 233, 0.18);
  --border-bronze:   rgba(194, 168, 120, 0.55);

  /* ---- Accents & state ---------------------------------- */
  --accent-primary:  var(--forest);
  --accent-warm:     var(--bronze);
  --accent-botanic:  var(--sage);
  --focus-ring:      var(--bronze-deep);

  /* ---- Feedback (kept warm & restrained) ---------------- */
  --positive:  #5E7355;   /* in-stock / success — reads as deep sage      */
  --notice:    #B07B3E;   /* low stock / attention — warm amber           */
  --critical:  #9A4E3F;   /* error — muted terracotta, never fire-red     */
  --sale:      #9A4E3F;   /* price reductions, used very sparingly        */
}
/* ============================================================
   Luxavia — Typography tokens
   High-contrast display serif (Cormorant Garamond) for headlines
   and the wordmark feel; warm humanist grotesque (Hanken Grotesk)
   for body, UI and tracked capital labels.
   ============================================================ */

:root {
  /* ---- Families ----------------------------------------- */
  --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* ---- Fluid display sizes (editorial headlines) -------- */
  --text-hero:    clamp(3.25rem, 6vw, 5.5rem);   /* 52 → 88  */
  --text-display: clamp(2.5rem, 4.5vw, 4rem);    /* 40 → 64  */
  --text-h1:      clamp(2rem, 3.4vw, 3rem);       /* 32 → 48  */
  --text-h2:      clamp(1.6rem, 2.4vw, 2.25rem);  /* 26 → 36  */
  --text-h3:      1.5rem;                          /* 24       */

  /* ---- Body & UI sizes ---------------------------------- */
  --text-lead:    1.25rem;    /* 20 — intros, lead paragraphs  */
  --text-body:    1rem;       /* 16 — default body             */
  --text-sm:      0.875rem;   /* 14 — secondary, meta          */
  --text-xs:      0.75rem;    /* 12 — fine print               */
  --text-label:   0.6875rem;  /* 11 — tracked caps labels      */

  /* ---- Weights ------------------------------------------ */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-display: 500;   /* default Cormorant headline weight */

  /* ---- Line heights ------------------------------------- */
  --leading-tight:  1.04;   /* large display serif             */
  --leading-snug:   1.18;   /* headings                        */
  --leading-normal: 1.4;    /* UI                              */
  --leading-relaxed:1.62;   /* body copy                       */

  /* ---- Letter spacing ----------------------------------- */
  --tracking-display: -0.01em;  /* tighten large serif         */
  --tracking-tight:   -0.005em;
  --tracking-normal:  0;
  --tracking-wide:    0.08em;   /* small caps                  */
  --tracking-label:   0.22em;   /* "ONTDEK DE COLLECTIE" labels */
}

/* ---- Editorial helper classes ----------------------------
   Optional utilities consuming surfaces may apply directly. */
.lx-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-label);
}

.lx-display {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
}

.lx-lead {
  font-family: var(--font-sans);
  font-size: var(--text-lead);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}
/* ============================================================
   Luxavia — Spacing, radii, shadow, layout & motion tokens
   Generous whitespace, restrained radii, soft warm shadows.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base) ------------------------- */
  --space-1:  0.25rem;   /*  4 */
  --space-2:  0.5rem;    /*  8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 — editorial section rhythm */

  /* ---- Radii (restrained, never bubbly) ----------------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Soft, warm-tinted shadows ------------------------ */
  --shadow-xs: 0 1px 2px rgba(31, 29, 26, 0.05);
  --shadow-sm: 0 2px 8px rgba(31, 29, 26, 0.06);
  --shadow-md: 0 10px 30px rgba(31, 29, 26, 0.08);
  --shadow-lg: 0 24px 60px rgba(31, 29, 26, 0.12);
  --shadow-product: 0 30px 70px -28px rgba(31, 29, 26, 0.30); /* floating product photography */

  /* ---- Layout ------------------------------------------- */
  --container-max: 1280px;   /* editorial content width        */
  --container-wide: 1520px;  /* full-bleed lifestyle blocks     */
  --gutter:        clamp(1.25rem, 4vw, 4rem); /* @kind spacing */
  --header-height: 92px;     /* sticky header (logo runs large) */

  /* ---- Motion (calm, never bouncy) ---------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast: 160ms; /* @kind other */
  --duration-base: 280ms; /* @kind other */
  --duration-slow: 520ms; /* @kind other */
}
/* ============================================================
   Luxavia — Base element defaults
   Light, opinionated resets that apply the brand to bare HTML.
   ============================================================ */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--text-primary);
  background-color: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-display);
  color: var(--text-primary);
  margin: 0 0 0.5em;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); letter-spacing: var(--tracking-tight); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-primary);
  text-decoration: none;
  text-underline-offset: 0.18em;
  transition: color var(--duration-fast) var(--ease-standard),
              opacity var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--bronze-deep); }

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

::selection {
  background: var(--bronze-tint);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

hr {
  border: none;
  border-top: 1px solid var(--border-hairline);
  margin: var(--space-6) 0;
}

small { font-size: var(--text-sm); }

strong, b { font-weight: var(--weight-semibold); }