/* MicroHoudi design system v1 — tokens.
   Single source of truth for colour, type, space, radius, stroke, motion and elevation.
   Fonts are self-hosted via ./fonts.css. Breakpoints (not expressible as custom properties):
   1200px (nav compaction), 1024px (tablet landscape / drawer nav), 768px (tablet), 480px (phone). */
:root {
  --mh-color-ink: #071B31;
  --mh-color-slate: #506784;
  --mh-color-paper: #F3F7FC;
  --mh-color-white: #FFFFFF;
  --mh-color-ice: #E4F0FD;
  --mh-color-line: #D3E3F5;
  --mh-color-blue: #2F7BFF;
  --mh-color-blue-strong: #1A5BE0;
  --mh-color-midnight: #071A4A;
  --mh-color-navy: #0B2A6E;
  --mh-color-navy-raised: #113A8E;
  --mh-color-navy-line: #2E64CC;
  --mh-color-sky: #9AD3FF;
  --mh-color-mist: #AFC4D8;
  --mh-color-rose: #F7A8CB;
  --mh-color-rose-strong: #D4367E;
  --mh-color-rose-bg: #FDE6F0;
  --mh-color-success: #16734C;
  --mh-color-success-bg: #E5F5EC;
  --mh-color-warning: #88580A;
  --mh-color-warning-bg: #FFF2D9;
  --mh-color-error: #B42335;
  --mh-color-error-bg: #FDEBEC;
  --mh-color-warning-dark: #FFC875;
  --mh-color-success-dark: #81DBAD;
  --mh-color-error-dark: #FFB0BD;
  --mh-color-disabled: #A4B2C3;
  --mh-space-0: 0px;
  --mh-space-1: 4px;
  --mh-space-2: 8px;
  --mh-space-3: 12px;
  --mh-space-4: 16px;
  --mh-space-5: 20px;
  --mh-space-6: 24px;
  --mh-space-8: 32px;
  --mh-space-10: 40px;
  --mh-space-12: 48px;
  --mh-space-16: 64px;
  --mh-space-20: 80px;
  --mh-space-24: 96px;
  --mh-space-32: 128px;
  --mh-radius-none: 0px;
  --mh-radius-xs: 4px;
  --mh-radius-sm: 8px;
  --mh-radius-md: 12px;
  --mh-radius-lg: 20px;
  --mh-radius-xl: 24px;
  --mh-radius-pill: 999px;
  --mh-stroke-hairline: 1px;
  --mh-stroke-default: 1.5px;
  --mh-stroke-icon: 1.75px;
  --mh-stroke-strong: 2px;
  --mh-stroke-focus: 3px;
  --mh-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mh-shadow-card: 0 8px 24px rgba(7,27,49,.06);
  --mh-shadow-float: 0 20px 60px rgba(4,17,31,.16);
  --mh-duration-fast: 140ms;
  --mh-duration-normal: 220ms;
  --mh-ease: cubic-bezier(.2,.8,.2,1);
  --mh-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --mh-text-xs: 12px;
  --mh-text-sm: 13px;
  --mh-text-base: 15px;
  --mh-text-md: 16px;
  --mh-text-lg: 18px;
  --mh-text-xl: 20px;
  --mh-text-2xl: 24px;
  --mh-text-3xl: 32px;
  --mh-display-1: clamp(46px, 7vw, 96px);
  --mh-display-2: clamp(32px, 4vw, 56px);
  --mh-display-3: clamp(28px, 3vw, 40px);
  --mh-stat: clamp(44px, 5vw, 72px);
  --mh-leading-tight: 1.08;
  --mh-leading-snug: 1.25;
  --mh-leading-normal: 1.55;
  --mh-leading-relaxed: 1.7;
  --mh-tracking-tight: -0.03em;
  --mh-tracking-caps: 0.12em;
  --mh-container: 1200px;
  --mh-gutter: 32px;
  --mh-header-height: 64px;
  --mh-z-drawer: 95;
  --mh-z-header: 100;
  --mh-z-modal: 1000;
  --mh-z-skip: 1100;
  --mh-focus-ring: var(--mh-stroke-focus) solid var(--mh-accent);
  --mh-focus-offset: 3px;
}
/* Semantic roles. Light is the default (paper for explanation); dark is an explicit scope
   for the cover, chapter changes and a small number of strategic statements. */
:root, [data-mh-theme="light"] {
  --mh-canvas: var(--mh-color-paper);
  --mh-surface: var(--mh-color-white);
  --mh-surface-tint: var(--mh-color-ice);
  --mh-surface-sunken: var(--mh-color-paper);
  --mh-surface-hover: color-mix(in srgb, var(--mh-color-ice) 70%, var(--mh-color-white));
  --mh-text: var(--mh-color-ink);
  --mh-text-secondary: var(--mh-color-slate);
  --mh-accent: var(--mh-color-blue-strong);
  --mh-accent-decorative: var(--mh-color-blue);
  --mh-border: var(--mh-color-line);
  --mh-on-accent: var(--mh-color-white);
  --mh-inverse: var(--mh-color-midnight);
  --mh-success: var(--mh-color-success);
  --mh-warning: var(--mh-color-warning);
  --mh-error: var(--mh-color-error);
  --mh-success-bg: var(--mh-color-success-bg);
  --mh-error-bg: var(--mh-color-error-bg);
  --mh-overlay: rgba(7, 27, 49, 0.6);
  --mh-glow: color-mix(in srgb, var(--mh-accent) 22%, transparent);
  --mh-glow-soft: color-mix(in srgb, var(--mh-accent) 10%, transparent);
  --mh-shadow-elevated: var(--mh-shadow-float);
  color-scheme: light;
}
[data-mh-theme="dark"] {
  --mh-canvas: var(--mh-color-midnight);
  --mh-surface: var(--mh-color-navy);
  --mh-surface-tint: var(--mh-color-navy-raised);
  --mh-surface-sunken: var(--mh-color-midnight);
  --mh-surface-hover: color-mix(in srgb, var(--mh-color-navy-raised) 86%, var(--mh-color-white));
  --mh-text: var(--mh-color-white);
  --mh-text-secondary: var(--mh-color-mist);
  --mh-accent: var(--mh-color-sky);
  --mh-accent-decorative: var(--mh-color-sky);
  --mh-border: var(--mh-color-navy-line);
  --mh-on-accent: var(--mh-color-ink);
  --mh-inverse: var(--mh-color-paper);
  --mh-success: var(--mh-color-success-dark);
  --mh-warning: var(--mh-color-warning-dark);
  --mh-error: var(--mh-color-error-dark);
  --mh-success-bg: color-mix(in srgb, var(--mh-success) 16%, transparent);
  --mh-error-bg: color-mix(in srgb, var(--mh-error) 16%, transparent);
  --mh-overlay: rgba(4, 17, 31, 0.82);
  --mh-glow: color-mix(in srgb, var(--mh-accent) 32%, transparent);
  --mh-glow-soft: color-mix(in srgb, var(--mh-accent) 14%, transparent);
  --mh-shadow-elevated: 0 24px 60px rgba(4, 17, 31, 0.55);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --mh-duration-fast: 0ms; --mh-duration-normal: 0ms; } }