/* Design tokens — "Calm Canadian Home".
   Ported from .impeccable/design.json + DESIGN.md, cross-checked vs post-5.css. */

:root {
  /* Brand + palette */
  --color-sage: #54775c;
  --color-pale-green: #dafcc3;
  --color-plum: #472836;
  --color-plum-hover: #5d3447;
  --color-orange: #f1873f;
  --color-periwinkle: #b0b9d6;
  --color-pale-blue: #d5e4f0;
  --color-peach: #ffbc7d;
  --color-ink: #121313;
  --color-white: #ffffff;
  --color-muted: #6b7178;       /* placeholder / quiet text — AA on white (4.95:1) */
  --color-border: #d5e4f0;      /* default field border (pale blue) */
  --color-page-bg: #ffffff;     /* default site background; pages override per body class */

  /* UI tints (folded out of hard-coded values) */
  --color-card-periwinkle: #dee1ee; /* Canadian hero card background */
  --color-frame: #e3e5e8;           /* review-carousel frame gray */
  --color-dot-idle: #c9c9c9;        /* carousel dot, inactive */
  --color-flag-red: #ff0000;        /* Canadian flag red (large/decorative only) */
  --color-required: #c62828;        /* required-field marker — AA on white/mint */
  --color-error: #b3403a;           /* form validation error (muted warm red) */
  --color-error-tint: rgba(179, 64, 58, 0.15); /* error focus ring */

  /* Focus rings */
  --ring-sage: 0 0 0 3px rgba(84, 119, 92, 0.18);
  --ring-plum: 3px solid rgba(71, 40, 54, 0.45);

  /* Typography */
  --font-heading: 'Ubuntu', system-ui, sans-serif;
  --font-body: 'Prompt', system-ui, sans-serif;

  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);  /* 36 → 56 */
  --fs-headline: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem); /* 28 → 40 */
  --fs-lead: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);     /* 22 → 32 */
  --fs-body: 1.25rem;   /* 20px — the Big-Friendly-Body rule */
  --fs-label: 1.25rem;  /* 20px */
  --fs-small: 1rem;     /* 16px — fine print, footer */

  --lh-heading: 1.2;
  --lh-body: 1.5;

  /* Radius */
  --radius-btn: 10px;
  --radius-card: 6px;
  --radius-pill: 50px;

  /* Spacing / layout */
  --space-widget: 20px;
  --container: 1140px;
  --gutter: clamp(16px, 4vw, 32px);

  /* Elevation — never present at rest */
  --shadow-hover: 0 8px 24px rgba(18, 19, 19, 0.10);

  /* Motion */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 200ms;
}