/* ============================================================
   WoreItorWearit — design tokens · Maison edition
   Ultra high-end fashion-house language: alabaster porcelain,
   near-black ink, deep bordeaux, serif editorial display.
   Variable NAMES are unchanged from v1 so all consumers keep working;
   the values are remapped to the new palette.
   ============================================================ */
:root {
  /* --- Warm neutrals (alabaster → ink) — legacy "ivory/stone/ink" names --- */
  --ivory-50:  #FBFAF6;  /* raised card / sheet */
  --ivory-100: #F6F4EE;  /* app background */
  --ivory-200: #EEEBE2;  /* muted surface / hover fill */
  --ivory-300: #E3DFD3;  /* hairline / input rail */
  --ivory-400: #D2CCBD;  /* stronger hairline */

  --stone-400: #A8A196;
  --stone-500: #8A8378;  /* tertiary / placeholder */
  --stone-600: #6C655C;  /* secondary text */
  --stone-700: #47423B;
  --ink-800:   #2B2723;
  --ink-900:   #191613;  /* primary text — near black */

  /* --- Bordeaux (brand accent) — legacy "rose" names --- */
  --rose-50:  #F2E8E8;
  --rose-100: #E9DAD7;  /* light text on dark surfaces */
  --rose-200: #D6BCBC;
  --rose-300: #B08289;
  --rose-400: #94525E;
  --rose-500: #7A3543;  /* PRIMARY accent */
  --rose-600: #632631;
  --rose-700: #4C1B24;

  /* --- Champagne & espresso — legacy "mauve/plum" names --- */
  --mauve-300: #C0B49E;
  --mauve-500: #A8894F;  /* champagne gold detail */
  --mauve-700: #6E5A33;
  --plum-900:  #14100D;  /* espresso black, dark chrome */

  /* --- Semantic (muted, warm) --- */
  --sage-500:      #6D7F65;
  --amber-500:     #A8894F;
  --terracotta-500:#9C4034;

  /* --- Semantic aliases --- */
  --bg-app:        var(--ivory-100);
  --bg-elevated:   var(--ivory-50);
  --surface-card:  var(--ivory-50);
  --surface-muted: var(--ivory-200);
  --surface-sunken:var(--ivory-300);
  --surface-dark:  var(--plum-900);

  --text-primary:   var(--ink-900);
  --text-secondary: var(--stone-600);
  --text-tertiary:  var(--stone-500);
  --text-on-accent: #FFFFFF;
  --text-on-dark:   var(--ivory-100);
  --text-link:      var(--rose-600);

  --border-subtle: var(--ivory-300);
  --border-strong: var(--ivory-400);
  --border-focus:  var(--ink-900);

  --accent:        var(--rose-500);
  --accent-hover:  var(--rose-600);
  --accent-press:  var(--rose-700);
  --accent-soft:   var(--rose-50);
  --accent-soft-2: var(--rose-100);

  --success: var(--sage-500);
  --warning: var(--amber-500);
  --danger:  var(--terracotta-500);

  --scrim:      rgba(20, 16, 13, 0.5);
  --scrim-soft: rgba(20, 16, 13, 0.18);

  /* --- Typography — serif display over a tracked grotesque --- */
  --font-sans: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 500;  /* Jost reads heavy fast — cap "semibold" at 500 */
  --fw-bold: 600;
  --fw-heavy: 700;

  --fs-display:   38px;  /* serif display */
  --fs-title-1:   30px;
  --fs-title-2:   23px;
  --fs-title-3:   19px;
  --fs-body:      16px;
  --fs-callout:   15px;
  --fs-subhead:   14px;
  --fs-footnote:  13px;
  --fs-caption:   12px;
  --fs-micro:     11px;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-display: 0;       /* the serif carries itself — no negative tracking */
  --ls-tight:   0.01em;
  --ls-normal:  0.02em;  /* light grotesques breathe with a whisper of air */
  --ls-label:   0.22em;  /* couture caps */

  /* --- Spacing (4px grid) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;

  --gutter: 22px;
  --gutter-tight: 16px;
  --touch-min: 44px;
  --navbar-h: 52px;
  --tabbar-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 440px;

  /* --- Corners: gallery-sharp. Hairlines over shadows. --- */
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-pill: 0px;
  --radius-circle: 50%;

  --shadow-xs: none;
  --shadow-sm: 0 1px 2px rgba(20, 16, 13, 0.04);
  --shadow-md: 0 10px 30px rgba(20, 16, 13, 0.07);
  --shadow-lg: 0 24px 60px rgba(20, 16, 13, 0.12);
  --shadow-sheet: 0 -16px 50px rgba(20, 16, 13, 0.16);

  /* focus ring */
  --ring: 0 0 0 1.5px var(--ink-900);

  /* transitions — unhurried, editorial */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.3, 1.2, 0.5, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 420ms;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--accent-press); }

.wiw-eyebrow {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent);
}

/* Serif display helper */
.wiw-display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
}

.material-symbols-rounded {
  font-family: 'Material Symbols Rounded';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  user-select: none;
}
.material-symbols-rounded.is-filled { font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24; }

::selection { background: var(--rose-100); color: var(--ink-900); }

:focus-visible { outline: none; box-shadow: var(--ring); }