/* ============================================================
   HEAD ✦ START — design tokens
   Single source of truth: palette, type, radii, shadows.
   Variable names match the prototypes exactly, so this file is
   drop-in compatible with /prototypes/*.html.

   Usage:  @import "./tokens.css";   (once, at the root)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@400;500;600&display=swap');

:root{
  /* ---- palette (sampled from the approved reference) ---------- */
  --linen:    #F9F7F4;   /* porcelain — page background            */
  --linen-2:  #F1EFE9;   /* warm grey-cream — alternating sections */
  --paper:    #FFFFFF;   /* white — cards                          */
  --ink:      #1A1917;   /* charcoal — text AND primary buttons    */
  --ink-2:    #4F4E48;   /* soft charcoal — body copy              */
  --clay:     #8B897F;   /* muted grey-taupe — captions / meta     */

  /* NOTE: --moss* is the SAGE accent (historical name kept for    */
  /* drop-in compatibility). Use it for accents only — never for   */
  /* large fills or primary buttons (those are --ink).             */
  --moss:      #728D74;  /* PRIMARY accent — sage                   */
  --moss-deep: #5E7860;  /* deeper sage — hovers / italic accent    */
  --moss-ink:  #455A47;  /* deepest sage — text on pale-sage fields */
  --sage:      #EDF3ED;  /* pale sage — pills / chips / fields       */
  --sage-2:    #F2F6F2;  /* faintest sage tint                      */

  --gold:      #C2A05A;  /* warm gold — review stars only           */
  --btn-hover: #322F2A;  /* charcoal primary-button hover           */

  /* ---- hairlines --------------------------------------------- */
  --line:   rgba(26,25,23,.10);
  --line-2: rgba(26,25,23,.16);

  /* ---- type -------------------------------------------------- */
  --font-sans:  'Jost', system-ui, sans-serif;          /* UI + body */
  --font-serif: 'Cormorant Garamond', Georgia, serif;   /* display   */
  --fw-body:    400;   /* regular — body & headings (bumped thicker) */
  --fw-medium:  500;   /* nav links, buttons, eyebrows, labels       */

  /* ---- radii ------------------------------------------------- */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px;

  /* ---- shadows ----------------------------------------------- */
  --shadow:    0 1px 2px rgba(26,25,23,.04), 0 14px 34px -14px rgba(26,25,23,.14);
  --shadow-lg: 0 2px 4px rgba(26,25,23,.05), 0 34px 64px -26px rgba(26,25,23,.22);

  /* ---- motion ------------------------------------------------ */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Optional base defaults — apply if you want them globally.
   The prototypes already set these inline; uncomment if useful. */
/*
body{
  background: var(--linen);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
}
*/