/**
 * HM Design Tokens — Source of Truth
 * Version: 1.0.0
 * Built from: /root/tasks/planning/hm-design-tokens-2026-05-26.md
 * Owner approval: Quiet Banking + ClockID identity, 2026-05-26
 */

:root {
	/* === Brand colors (ClockID identity, verified from production CSS) === */
	--hm-forest-dark: #1F4129;
	--hm-forest: #2D5A3D;
	--hm-forest-light: #3F7654;
	--hm-mint: #9EE5BF;
	--hm-mint-light: #CDF2DD;
	--hm-mint-dark: #7DD9A8;
	--hm-green: #5CB88A;
	--hm-green-dark: #3F9C6E;

	/* === Warm accents === */
	--hm-coral: #FFA3A3;
	--hm-coral-dark: #C45A4E;
	--hm-peach: #FFC199;
	--hm-peach-light: #FFD0AD;

	/* === Action / CTA punch === */
	--hm-action: #FF9800;
	--hm-action-dark: #E88600;

	/* === Destructive === */
	--hm-terracotta: #C45A4E;

	/* === Neutrals === */
	--hm-warm-white: #FAF8F5;
	--hm-paper: #F8F9FA;
	--hm-white: #FFFFFF;
	--hm-sand: #F4E4D0;
	--hm-sand-light: #FAF1E3;
	--hm-slate: #2C3E50;
	--hm-slate-soft: #4A5C6E;
	--hm-mist: #6B7B7C;
	--hm-border: #E5E0D6;
	--hm-border-strong: #D1C9B8;

	/* === Legacy aliases for compatibility === */
	--hm-teal: var(--hm-forest);
	--hm-teal-dark: var(--hm-forest-dark);

	/* === Typography === */
	--hm-font-family: 'Heebo', system-ui, -apple-system, sans-serif;

	--hm-font-xs: 11px;
	--hm-font-sm: 12px;
	--hm-font-base: 14px;
	--hm-font-md: 16px;
	--hm-font-lg: 18px;
	--hm-font-xl: 22px;
	--hm-font-2xl: clamp(26px, 4vw, 38px);
	--hm-font-3xl: clamp(34px, 6vw, 56px);

	--hm-fw-regular: 400;
	--hm-fw-medium: 500;
	--hm-fw-semibold: 600;
	--hm-fw-bold: 700;
	--hm-fw-extrabold: 800;

	/* === Spacing === */
	--hm-space-1: 4px;
	--hm-space-2: 8px;
	--hm-space-3: 12px;
	--hm-space-4: 16px;
	--hm-space-5: 20px;
	--hm-space-6: 24px;
	--hm-space-7: 28px;
	--hm-space-8: 32px;
	--hm-space-10: 40px;
	--hm-space-12: 48px;
	--hm-space-16: 64px;
	--hm-space-20: 80px;

	/* === Radii === */
	--hm-radius-xs: 6px;
	--hm-radius-sm: 8px;
	--hm-radius-md: 10px;
	--hm-radius-lg: 12px;
	--hm-radius-xl: 14px;
	--hm-radius-2xl: 18px;
	--hm-radius-pill: 999px;

	/* === Shadows === */
	--hm-shadow-1: 0 1px 3px rgba(45, 90, 61, 0.04);
	--hm-shadow-2: 0 2px 8px rgba(45, 90, 61, 0.06);
	--hm-shadow-3: 0 4px 16px rgba(45, 90, 61, 0.06);
	--hm-shadow-4: 0 8px 24px rgba(45, 90, 61, 0.08);
	--hm-shadow-hover: 0 16px 32px rgba(45, 90, 61, 0.10);
	--hm-shadow-hero: 0 12px 40px rgba(45, 90, 61, 0.12);
	--hm-shadow-action: 0 4px 14px rgba(255, 152, 0, 0.30);
	--hm-shadow-action-hover: 0 8px 28px rgba(255, 152, 0, 0.45);

	/* === Motion === */
	--hm-transition-fast: 0.15s ease;
	--hm-transition-base: 0.2s ease;
	--hm-transition-slow: 0.3s ease;
	--hm-transition-bezier: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

	/* === Z-index === */
	--hm-z-base: 0;
	--hm-z-sticky: 10;
	--hm-z-topbar: 100;
	--hm-z-fab: 150;
	--hm-z-modal: 200;
	--hm-z-skip: 1000;
}

/* === Accessibility — reduced motion === */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
	animation-duration: 0.01ms !important;
	transition-duration: 0.01ms !important;
	}
}

/* === Body baseline (only on v2 surfaces) === */
.hm-v2 {
	font-family: var(--hm-font-family);
	background: var(--hm-warm-white);
	color: var(--hm-slate);
	direction: rtl;
	line-height: 1.6;
	font-size: var(--hm-font-md);
	-webkit-font-smoothing: antialiased;
}

.hm-v2 *:focus-visible {
	outline: 3px solid var(--hm-forest);
	outline-offset: 2px;
	border-radius: var(--hm-radius-xs);
}

.hm-v2 .hm-tabular {
	font-variant-numeric: tabular-nums;
}

.hm-v2 .hm-skip-link {
	position: absolute;
	top: -40px;
	inset-inline-start: 8px;
	background: var(--hm-forest-dark);
	color: var(--hm-white);
	padding: 8px 16px;
	z-index: var(--hm-z-skip);
	text-decoration: none;
	border-radius: var(--hm-radius-md);
}
.hm-v2 .hm-skip-link:focus {
	top: 8px;
}