/* ============================================================================
   Retrove design tokens — the single source of truth for the new skin.
   Ported from the Claude Design handoff (design_handoff_retrove_skin/tokens/).
   Link this on every page, then the page's own <style> uses the variables.
   Fonts are loaded via a <link> in each page <head> (faster than @import here).
   ============================================================================ */
:root {
  /* ---- Base palette ---- */
  --cream:       #f6f1e6; /* page background — warm, slightly toasted cream */
  --paper:       #ffffff; /* raised surfaces: cards, inputs */
  --ink:         #221f1a; /* primary text — warm near-black */
  --muted:       #6f685c; /* secondary text, eyebrows, captions */
  --line:        #e7e0d1; /* hairline borders, dividers */
  --surface:     #faf6ec; /* inset/recessed surfaces — a hair off cream (try-on frames, info cards) */

  /* ---- Brand palette ---- */
  --forest:      #2f4a42; /* PRIMARY brand / action — deep forest green */
  --forest-ink:  #22362f; /* hover / pressed / dark green sections */
  --rust:        #d4572a; /* warm accent — the logo "o", likes, energy */
  --rust-ink:    #ab4019; /* hover / pressed rust */
  --teal:        #1f7a70; /* cool supporting note — links, labels */
  --teal-ink:    #155b53;
  --mustard:     #e6a52b; /* pop / highlight — sale flags */
  --plum:        #6b3f63;
  --green:       #3f8a5f; /* success / "available" state */

  /* ---- Tints for status & chips ---- */
  --green-tint:  #e3f0e7;
  --rust-tint:   #fbe6da;
  --rust-line:   #f1cdb9;
  --teal-tint:   #def0ed;
  --mustard-tint:#fbeecb;
  --note-bg:     #fff6e6;
  --note-line:   #e9c987;
  --note-ink:    #8a5e1c;

  /* ---- Semantic aliases ---- */
  --action-bg:        var(--forest);
  --action-bg-hover:  var(--forest-ink);
  --text-on-dark:     #f4efe4;
  --text-link:        var(--teal);

  /* ---- Type families ---- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-logo:    "Special Elite", "Courier New", ui-monospace, monospace; /* wordmark ONLY */
  /* legacy aliases so part-migrated pages don't break mid-rollout */
  --font-serif:   var(--font-display);
  --font-sans:    var(--font-body);

  /* ---- Type sizes ---- */
  --text-display:   clamp(44px, 7.6vw, 86px);
  --text-h1:        clamp(34px, 5vw, 50px);
  --text-h2:        clamp(28px, 3.6vw, 38px);
  --text-h3:        22px;
  --text-lead:      clamp(20px, 2.4vw, 28px);
  --text-body-lg:   16px;
  --text-body:      14.5px;
  --text-sm:        13px;
  --text-xs:        11.5px;

  /* ---- Tracking ---- */
  --track-eyebrow:  0.12em;
  --track-wide:     0.16em;
  --track-wider:    0.22em;
  --track-brand:    0.30em;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:22px;
  --space-6:28px; --space-7:40px; --space-8:56px; --space-9:72px; --space-10:96px;

  /* ---- Radii (rounder, friendly) ---- */
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --radius-xl:24px; --radius-pill:999px;

  /* ---- Shadows (the new depth system) ---- */
  --shadow-sm:    0 1px 2px rgba(34,31,26,.06);
  --shadow-card:  0 2px 4px rgba(34,31,26,.05), 0 8px 20px rgba(34,31,26,.07);
  --shadow-raise: 0 6px 14px rgba(34,31,26,.08), 0 18px 40px rgba(34,31,26,.12);
  --shadow-pop:   0 10px 24px rgba(47,74,66,.22);

  /* ---- Layout ---- */
  --container:1180px; --container-sm:460px; --gutter:28px;

  /* ---- Motion ---- */
  --ease-soft: cubic-bezier(0.4,0,0.2,1);
  --ease-pop:  cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:  0.18s;
  --dur-image: 0.6s;
}
