/* ============================================================
   Stillhaven — Design Tokens  (v3.0)
   Synced copy of /brand/brand-tokens.css — keep in sync; do not diverge.
   Reference var(--token); do not hardcode hex.
   ============================================================ */

:root {
  /* ---- Brand: sage ramp (500 is the primary brand color) ---- */
  --sage-50:  #F5F7EF;
  --sage-100: #E8EDD9;
  --sage-200: #D3DCB8;
  --sage-300: #B7C691;
  --sage-400: #9CAE6F;
  --sage-500: #849B54;   /* PRIMARY — the mark, links, key surfaces */
  --sage-600: #6C7F43;
  --sage-700: #556231;
  --sage-800: #3E4924;
  --sage-900: #2B321A;

  /* ---- Accent: clay (use sparingly — play affordances, primary CTA) ---- */
  --clay:      #BE6E3A;
  --clay-dark: #9E5A2D;
  --clay-tint: #F3E2D5;

  /* ---- Neutrals (warm-leaning) ---- */
  --paper: #FBFBF9;   /* default background */
  --n-100: #F1F1ED;
  --n-200: #E3E3DD;
  --n-300: #CCCCC4;
  --n-400: #A6A69D;
  --gray:  #888888;   /* tagline, captions */
  --n-700: #54544E;
  --ink:   #1A1A1A;   /* "Still" half of the wordmark, body text */

  /* ---- Semantic aliases ---- */
  --color-brand:      var(--sage-500);
  --color-accent:     var(--clay);
  --color-bg:         var(--paper);
  --color-text:       var(--ink);
  --color-text-muted: var(--gray);
  --color-link:       var(--sage-600);

  /* ---- Wordmark (two-tone: "Still" + "haven", one word, no space) ---- */
  --wordmark-still:        var(--ink);        /* on light surfaces */
  --wordmark-haven:        var(--sage-500);   /* on light surfaces */
  --wordmark-still-rev:    var(--paper);      /* reversed, on dark surfaces */
  --wordmark-haven-rev:    var(--sage-400);   /* reversed, on dark surfaces */

  /* ---- Typography ---- */
  --font-sans: "Outfit", system-ui, Arial, sans-serif;   /* everything */
  --font-mono: "Space Mono", ui-monospace, monospace;    /* specs/data only */

  --weight-regular:  400;   /* body */
  --weight-medium:   500;   /* wordmark */
  --weight-semibold: 600;   /* headings */
  --weight-bold:     700;   /* display */

  /* Type scale (size / recommended weight) */
  --text-display: 48px;   /* 700 */
  --text-h1:      32px;   /* 600 */
  --text-h2:      22px;   /* 600 */
  --text-body:    16px;   /* 400 */
  --text-caption: 13px;   /* 500, --gray */

  /* The tagline is the one spacing exception:
     lowercase, Outfit 400, letter-spacing 4px, middot separators:
     host · embed · share */
  --tagline-tracking: 4px;

  /* ---- Shape ---- */
  --radius-box: 0;   /* the logo box and brand surfaces are SQUARE — keep 0 */
}