/* Theme: Wear Me — warm paper, clay accent, editorial serif display, pill buttons.
   Taken from the Claude Design project "Wear Me Shop Animation Guide"
   (ed645417-e254-43d3-bcef-33b926f7ed15, file `Shop Page.dc.html`).
   Apply:  cp design/themes/wear-me.css storefront/css/tokens.css
   Then swap the font link in storefront/index.html + track.html for:
   <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=IBM+Plex+Sans+Arabic:wght@400;500;600&display=swap" rel="stylesheet"> */
:root{
  /* palette — straight from the mockup */
  --ink:#17130F;          /* headings and body text */
  --black:#17130F;        /* strongest ink: nav, dark sections, default button */
  --bg:#F6F2EC;           /* page — warm paper, never white */
  --surface:#FDFBF8;      /* cards */
  --panel:#EDE4D9;        /* the colour-scrub section */
  --panel-2:#F1EAE1;      /* product image plate inside a card */
  --muted:#6B615A;        /* secondary text (mockup uses rgba(23,19,15,.6)) */
  --line:rgba(23,19,15,.10);
  --sale:#B9636A;         /* Rose, doubles as the sale/discount red */
  --accent:#B0705A;       /* clay — eyebrows, links, emphasis, badges */
  --on-accent:#F6F2EC;
  --accent-soft:#E3C4AC;  /* Nude — hero glow */
  --gold:#B0705A;

  /* type */
  --sans:"Archivo",system-ui,-apple-system,sans-serif;
  --display:"Instrument Serif",Georgia,serif;
  --arabic:"IBM Plex Sans Arabic",system-ui,sans-serif;   /* used when dir="rtl" */

  /* shape + voice — pill buttons, soft cards, sentence case with wide button tracking */
  --radius:999px;         /* buttons are fully round in this design */
  --radius-card:20px;
  --caps:uppercase;       /* button labels only; headings are sentence case */
  --track:.16em;

  /* layout */
  --wrap:1400px;
  --nav-h:56px; --announce-h:38px;
}

/* Paper, not white: cards and panels lift off the background. */
.card .media{background:var(--panel-2)}
.modal,.drawer,.sheet,.mega{background:var(--surface)}
.card,.qv,.pdp-main,.review,.pack-opt{border-radius:var(--radius-card)}

/* The mockup's headings are the serif at a tight leading; the sans carries everything else. */
h1,h2,h3,.serif{letter-spacing:-.015em;line-height:1.02}
.eyebrow{color:var(--accent);letter-spacing:.22em}

/* Arabic: switch the family and relax the tracking the Latin type needs. */
[dir="rtl"] body,[dir="rtl"] .btn,[dir="rtl"] .eyebrow{font-family:var(--arabic);letter-spacing:0}