/* ==========================================================================
   VIORA design tokens
   Single source for colour, type, spacing and shape. In WordPress these map
   to theme.json settings (palette, fontFamilies, fontSizes, spacingSizes).
   ========================================================================== */

@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/newsreader-latin.woff2") format("woff2-variations");
}
@font-face {
  font-family: "Newsreader Variable";
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url("../fonts/newsreader-latin-italic.woff2") format("woff2-variations");
}

:root {
  /* Brand */
  --c-aubergine: #2e1a2f;
  --c-aubergine-2: #46294a;
  --c-ink: #1f1a24;
  --c-muted: #5c5664;          /* 6.4:1 on mist */
  --c-mist: #eff1ec;           /* page background, cool */
  --c-mist-2: #e4e8e0;         /* tinted sections */
  --c-paper: #fbfbf8;          /* raised surfaces */
  --c-white: #ffffff;
  --c-line: #d6d9d0;
  --c-line-strong: #a9ada3;
  --c-brass: #b8862b;          /* decorative accent only */
  --c-brass-text: #7d5714;     /* brass for text, 5.6:1 on mist */
  --c-brass-light: #e0b85c;    /* accents on aubergine */
  --c-on-dark: #efe9f0;
  --c-on-dark-muted: #c7b9c9;

  /* Product plates (match illustration backdrops) */
  --plate-sage: #dce3d3;
  --plate-sand: #ece5d9;
  --plate-blush: #ebddd8;
  --plate-sky: #dce4ea;
  --plate-lilac: #e4deea;

  /* Feedback */
  --c-sale: #9c3a24;
  --c-success: #2c6648;
  --c-success-bg: #e0ece3;
  --c-error: #a12c25;
  --c-error-bg: #f6e3e0;
  --c-warn: #7d5714;

  /* Type */
  --f-sans: "Bricolage Grotesque Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-serif: "Newsreader Variable", Georgia, "Times New Roman", serif;
  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-base: 1rem;
  --t-md: 1.125rem;
  --t-lg: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --t-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --t-2xl: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem);
  --t-hero: clamp(3rem, 1.4rem + 6.4vw, 7rem);
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.55;

  /* Space (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --section: clamp(3.5rem, 2rem + 5vw, 7rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --container: 82.5rem;

  /* Shape: radius scales with hierarchy */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Elevation: overlays only */
  --shadow-pop: 0 24px 60px -18px rgba(46, 26, 47, 0.38);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 220ms;

  /* Layers */
  --z-header: 50;
  --z-drawer: 90;
  --z-modal: 100;
  --z-toast: 110;
}