/* public/design/hm-tokens.css
 * ─────────────────────────────────────────────────────────────────────────
 * HotelMonitor shared design tokens (site redesign, 2026-09).
 *
 * The single source for colour, type, spacing, radius, elevation and motion
 * values used by the redesigned pages and by public/design/hm-components.css.
 *
 * CONTRACT: this file declares CSS custom properties on :root and nothing
 * else. Every name starts with --hm-. It never styles an element, so linking
 * it on a page that does not use the tokens changes nothing.
 *
 * Values come from the approved design handoff (CLAUDE-HANDOFF.md, "Visual
 * system"), reconciled against the production-approved homepage, which must
 * stay pixel-identical:
 *   --hm-mint   handoff #edf5ef, homepage (approved) #edf3ee -> #edf3ee kept.
 * Everything else in the handoff table matched the homepage exactly.
 *
 * Additions not in the handoff table (component values the approved homepage
 * already uses, or states the handoff requires but did not colour):
 *   --hm-navy-deep, --hm-surface-muted, --hm-field-border, --hm-focus-glow,
 *   --hm-shadow-*: taken from the approved homepage, unchanged;
 *   --hm-error, --hm-error-bg: new (inline errors / failure states),
 *     chosen for >= 4.5:1 contrast. Flagged for design review.
 *
 * Breakpoints (custom properties cannot be used in media queries, so these
 * are documentation for every stylesheet built on these tokens):
 *   1050px  tighter gutters and headline sizes
 *    750px  navigation becomes a menu; sidebars move below content
 *    500px  discovery grids become one column
 * The homepage additionally stacks its hero at 880px (home.html's own rule).
 */
:root {
  /* Colour */
  --hm-ink: #0d2135;
  --hm-green: #1a6b4a;
  --hm-green-dark: #125038;
  --hm-cream: #faf9f6;
  --hm-muted: #586976;
  --hm-line: #e3e6e2;
  --hm-mint: #edf3ee;
  --hm-amber: #875519;
  --hm-amber-bg: #fbf5e9;
  --hm-white: #fff;
  --hm-navy-deep: #09233d;
  --hm-surface-muted: #eef2ef;
  --hm-field-border: #d4ded4;
  /* Form-field edge on the redesigned pages: 3.3-3.5:1 on white/cream (WCAG 1.4.11).
     --hm-field-border stays for the approved homepage and for non-field outlines. */
  --hm-field-edge: #7f8c84;
  --hm-error: #b42318;
  --hm-error-bg: #fef3f2;

  /* Type */
  --hm-font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --hm-font-body: 'DM Sans', Arial, system-ui, sans-serif;

  /* Layout */
  --hm-max-header: 1360px;
  --hm-max-content: 1200px;
  --hm-max-hero: 1280px;
  --hm-gutter: 40px;
  --hm-gutter-mobile: 20px;
  --hm-control-min: 44px;

  /* Radius */
  --hm-radius-control: 8px;
  --hm-radius-card: 14px;
  --hm-radius-panel: 17px;
  --hm-radius-hero: 24px;
  --hm-radius-pill: 999px;

  /* Elevation and focus */
  --hm-shadow-card: 0 1px 2px rgba(13, 33, 53, .06), 0 8px 24px rgba(13, 33, 53, .08);
  --hm-shadow-raised: 0 12px 50px rgba(0, 21, 34, .22);
  --hm-focus-glow: rgba(26, 107, 74, .16);

  /* Motion (components drop transitions under prefers-reduced-motion) */
  --hm-fast: 150ms;
}