/**
 * Household brand design tokens — CSS custom properties.
 * Source of truth for color values: colors.json (keep both in sync manually until Phase 6 adds a build step).
 * Derived from the wagtail logo (favicon-source.png) — see docs/design-system.md.
 */

:root {
  /* Sky — page backgrounds, info states */
  --hh-sky-100: #e8f1f8;
  --hh-sky-200: #d2e2ef;
  --hh-sky-300: #bed3e4;
  --hh-sky-400: #acc3d7;
  --hh-sky-500: #9cb4c8;
  --hh-sky-600: #6087a7;
  --hh-sky-700: #3d586e;

  /* Sage — success, nature, secondary surfaces */
  --hh-sage-100: #edf3ec;
  --hh-sage-200: #d5e1d2;
  --hh-sage-300: #bdcdb9;
  --hh-sage-400: #a6b9a1;
  --hh-sage-500: #8fa38a;
  --hh-sage-600: #657c5f;
  --hh-sage-700: #3e4f3a;

  /* Slate — primary actions, nav active, links */
  --hh-slate-100: #e9eef1;
  --hh-slate-200: #bdccd4;
  --hh-slate-300: #91a9b6;
  --hh-slate-400: #678697;
  --hh-slate-500: #4a5f6a;
  --hh-slate-600: #3a4c55;
  --hh-slate-700: #2a3840;

  /* Stone — neutral canvas background */
  --hh-stone-100: #f3f3ee;
  --hh-stone-200: #e2e2d8;
  --hh-stone-300: #cfcfc2;
  --hh-stone-400: #bcbcae;
  --hh-stone-500: #a8a89a;
  --hh-stone-600: #7b7b6b;
  --hh-stone-700: #4a4a40;

  /* Wing — borders, muted text, disabled */
  --hh-wing-100: #edf2f4;
  --hh-wing-200: #cedbe0;
  --hh-wing-300: #b1c3ca;
  --hh-wing-400: #95abb4;
  --hh-wing-500: #7a929c;
  --hh-wing-600: #586f79;
  --hh-wing-700: #3a4b52;

  --hh-white: #ffffff;
  --hh-ink: #1a1a1a;

  /* Semantic aliases — apps should consume these, not the raw scale, so a future
     re-tune of the brand palette does not require touching every consumer. */
  --hh-background: var(--hh-stone-100);
  --hh-surface: var(--hh-white);
  --hh-primary: var(--hh-slate-500);
  --hh-primary-hover: var(--hh-slate-600);
  --hh-primary-text: var(--hh-white);
  --hh-text: #1f2933;
  --hh-text-muted: var(--hh-wing-600);
  --hh-border: #e4e7ec;
  --hh-danger: #b42318;
  --hh-warn: #b54708;
  --hh-success: var(--hh-sage-600);

  /* Typography — Nunito's round terminals echo the logo's organic curves.
     Self-hosted via @fontsource/nunito (see tailwind/fonts.css) — apps opt in
     with one import, no third-party CDN dependency in production. */
  --hh-font-sans: "Nunito", "Segoe UI", system-ui, sans-serif;
  --hh-tracking-label: 0.08em;

  /* Radius — high radii match the logo's rounded, organic geometry */
  --hh-radius-sm: 8px;
  --hh-radius-md: 12px;
  --hh-radius-lg: 16px;
  --hh-radius-full: 9999px;

  /* Shadow — subtle, slate-tinted, for cards floating on pastel backgrounds */
  --hh-shadow-sm: 0 1px 2px rgba(42, 56, 64, 0.06), 0 1px 3px rgba(42, 56, 64, 0.08);
  --hh-shadow-md: 0 4px 8px rgba(42, 56, 64, 0.08), 0 2px 4px rgba(42, 56, 64, 0.06);
}