/* ==========================================================================
   Victor Harbour Whale Sighting — design tokens
   Source of truth: Figma "Victor Habour" (nUzPvr4HqSzZHp54mmHaPK)
   These map 1:1 to the visitvictorharbor.com design language and are the
   only place raw values should live. Components consume the custom props.
   ========================================================================== */

:root {
  /* --- Color (from Figma variables) --- */
  --vh-bone: #E5E2DB;        /* page background */
  --vh-card: #EFEEEA;        /* card / panel background */
  --vh-gray-10: #F2F4F8;     /* CoolGray/10 — input fill, icon tint */
  --vh-border: #DDE1E6;      /* input border / hairlines on light bg */
  --vh-black: #000000;
  --vh-white: #FFFFFF;
  --vh-live: #3DC514;        /* live-updates dot */

  /* Extrapolated — validation states are mandated by the brief but not
     designed in Figma. See DECISIONS.md. Valid reuses the live green. */
  --vh-error: #B3261E;
  --vh-valid: #3DC514;

  /* --- Typography --- */
  --vh-font-display: 'Josefin Sans', sans-serif; /* 700, UPPERCASE */
  --vh-font-body: 'Lora', serif;

  --vh-text-h3: 40px;        /* Desktop/H3 Josefin Bold, line-height 1 */
  --vh-text-body: 16px;      /* Lora Regular */
  --vh-leading-body: 26px;
  --vh-text-btn: 16px;       /* Josefin Bold, UPPERCASE, line-height 1 */

  /* --- Shape --- */
  --vh-radius: 2px;          /* buttons, badges, inputs */
  --vh-radius-panel: 12px;   /* desktop content panels */
  --vh-radius-panel-sm: 8px; /* mobile content panels */

  /* --- Layout --- */
  --vh-container: 1280px;    /* content width on 1440 artboard (80px margins) */
  --vh-gutter: 20px;         /* mobile side gutter (520 artboard) */
}