/* ===========================================================================
   oldfarmter.us — design tokens

   THIS FILE IS THE DESIGN SWAP POINT. When the Claude Design work lands,
   change the values in :root below and nothing else. Every other stylesheet
   on the site — including availability-calendar.css, which is copied verbatim
   from the kit and must stay byte-identical to it so it can be re-copied when
   the kit updates — reads its colours from here.

   Two layers, on purpose:

     1. BRAND TOKENS    semantic names (--brand, --surface, --text …). This is
                        what the design defines and what site CSS consumes.
     2. KIT ALIASES     the names availability-calendar.css hard-codes
                        (--emerald, --sand-light, --seafoam …), pointed at the
                        brand tokens. Do not edit these; they exist so the kit
                        file never has to be forked.

   The palette below is a deliberately neutral placeholder, not a design.

   ALSO NOT DRIVEN FROM HERE: the three OwnerRez widget stylesheets. Widgets
   render in a cross-origin iframe and cannot read these custom properties, so
   their colours are baked in as literals — set `brand` in api/site.config.json
   to the same values and run `node scripts/build-widget-css.mjs`.
   =========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --brand: #44403c;            /* primary: selected dates, buttons, links    */
  --brand-deep: #292524;       /* headings, emphasis on the brand colour     */
  --brand-soft: #57534e;       /* lighter brand, hovers on dark              */

  --accent: #d6d3d1;           /* range borders, quiet dividers              */
  --accent-soft: #f5f5f4;      /* range fill, hover wash                     */

  /* --- surfaces --------------------------------------------------------- */
  --surface: #ffffff;          /* cards, calendar body                       */
  --surface-alt: #fafaf9;      /* page ground, unavailable day cells         */
  --surface-warm: #f5f5f4;     /* alternating sections                       */
  --border: #e7e5e4;

  /* --- text ------------------------------------------------------------- */
  --text: #1c1917;
  --text-light: #78716c;
  --text-invert: #ffffff;

  /* --- type ------------------------------------------------------------- */
  --font-display: 'Lora';      /* quoted: the kit appends its own fallbacks  */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- shape ------------------------------------------------------------ */
  --radius: 12px;
  --radius-sm: 6px;
  --radius-pill: 100px;

  /* --- layout ----------------------------------------------------------- */
  --measure: 68ch;             /* readable line length for prose             */
  --page-max: 1180px;
  --gutter: 1.25rem;
  --section-y: 4rem;

  /* --- depth ------------------------------------------------------------ */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
}

/* ---------------------------------------------------------------------------
   Kit aliases — availability-calendar.css reads these names. Leave them
   pointing at the brand tokens above; re-map here if the kit ever renames one.
   --------------------------------------------------------------------------- */
:root {
  --white: var(--surface);
  --sand: var(--surface-warm);
  --sand-light: var(--surface-alt);

  --emerald: var(--brand);
  --emerald-deep: var(--brand-deep);
  --emerald-light: var(--brand-soft);

  --seafoam: var(--accent);
  --seafoam-light: var(--accent-soft);

  /* --text, --text-light, --radius, --radius-sm, --radius-pill and
     --font-display are already the names the kit expects. */
}