/* ==========================================================================
   01 · TOKENS
   Every colour, size and step the theme uses. Nothing downstream hard-codes
   a value — change it here and it changes everywhere.
   ========================================================================== */

:root {

  /* --- Palette ------------------------------------------------------------
     Warm paper ground. One accent (mulberry) does all the persuading; olive
     is the botanical secondary; gilt is for hairlines and eyebrows only. */

  --paper:       #fcf8f3;   /* page ground */
  --linen:       #f1e8dc;   /* alternating bands */
  --card:        #fffcf8;   /* raised surfaces */
  --rule:        #e0d3c2;   /* borders */
  --rule-soft:   #ede3d6;   /* quiet dividers */

  --ink:         #47372a;   /* headings, body */
  --ink-2:       #5f574e;   /* secondary text */
  --ink-3:       #8a8076;   /* meta, captions */

  --mulberry:    #7b4a52;   /* primary accent */
  --mulberry-dk: #613a41;   /* accent, hover */
  --mulberry-lt: #a97880;   /* accent, muted */
  --olive:       #5f6b4c;   /* secondary accent */
  --gilt:        #a8873f;   /* ornament only */

  --on-dark:     #f4ece2;   /* text on ink */
  --on-dark-2:   #b8ac9e;   /* secondary text on ink */

  /* --- Type ---------------------------------------------------------------
     All three faces ship full Latin Extended, which is what makes
     č ć š ž đ render instead of falling back mid-word. */

  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --fs-100: 0.75rem;      /* labels, eyebrows */
  --fs-200: 0.8125rem;    /* meta, buttons */
  --fs-300: 0.9375rem;    /* small body */
  --fs-400: 1.0313rem;    /* body */
  --fs-500: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);   /* lede */
  --fs-600: clamp(1.375rem, 0.9vw + 1.1rem, 1.75rem); /* card titles */
  --fs-700: clamp(1.75rem, 1.8vw + 1.2rem, 2.5rem);   /* section titles */
  --fs-800: clamp(2.25rem, 3.2vw + 1.2rem, 3.5rem);   /* page titles */
  --fs-900: clamp(2.75rem, 5.4vw + 1rem, 5rem);       /* hero */

  --lh-tight: 1.06;
  --lh-snug:  1.24;
  --lh-body:  1.62;

  --track-label:   0.14em;
  --track-eyebrow: 0.22em;

  /* --- Space --------------------------------------------------------------
     One scale. If a gap is not on it, it is a mistake. */

  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  --section-y: clamp(56px, 7vw, 112px);

  /* --- Layout ------------------------------------------------------------- */

  --container: 1560px;   /* wide, per the Aisle Planner reference */
  --narrow:    820px;
  --gutter:    clamp(20px, 5vw, 80px);
  --measure:   68ch;
  --header-h:  76px;

  /* Height of the WordPress admin bar, 0 for logged-out visitors. Everything
     pinned to the viewport offsets by this, so the numbers live in one place.
     WP: 32px above 782px, 46px between 601–782px, and below 601px the bar
     becomes position:absolute and scrolls away — so back to 0. */
  --admin-bar: 0px;

  /* --- Chrome -------------------------------------------------------------
     Deliberately thin. The artwork is the design; the frame is not. */

  --radius-pill: 999px;
  --border:      1px solid var(--rule);
  --shadow-lift: 0 18px 40px -28px rgba(53, 38, 28, 0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur:  0.5s;
}

@media (max-width: 700px) {
  :root {
    --header-h:  62px;
    --section-y: 48px;
  }
}

.admin-bar { --admin-bar: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar { --admin-bar: 46px; }
}

@media screen and (max-width: 600px) {
  .admin-bar { --admin-bar: 0px; }
}