@font-face{font-family:Rubik;font-style:normal;font-weight:300;font-display:swap;src:url('/assets/fonts/rubik-300.ttf') format('truetype')}
@font-face{font-family:Rubik;font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/rubik-400.ttf') format('truetype')}
@font-face{font-family:Rubik;font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/rubik-500.ttf') format('truetype')}
@font-face{font-family:Rubik;font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/rubik-600.ttf') format('truetype')}
@font-face{font-family:Rubik;font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/rubik-700.ttf') format('truetype')}
@font-face{font-family:Rubik;font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/rubik-800.ttf') format('truetype')}
/* HealthMe Design System — Core Tokens
 * Colors + typography, extracted from ui-v2/tailwind.config.cjs and
 * ui-v2/src/assets/styles/tailwind/index.css.
 *
 * In-app font is Rubik (forced via `* { font-family: 'Rubik' }` in the
 * global stylesheet) even though tailwind.config declares Inter as sans.
 * Rubik is the source of truth.
 */


:root {
	/* ---------------- Brand colors ---------------- */
	/* Dark Blue — primary brand color, used on headers, buttons, nav */
	--hm-dark-blue-500: #2a4566;
	--hm-dark-blue-600: #315074; /* canonical */
	--hm-dark-blue-700: #283f5e;
	--hm-dark-blue-800: #1e2f4a;

	/* Green — accent color from logo cross, used for success/positive */
	--hm-green-300: #9aeec3;
	--hm-green-500: #4daf7c;
	--hm-green-600: #56bd88; /* canonical */
	--hm-green-700: #4aa471;

	/* Blue — links, interactive accents */
	--hm-blue-500: #1f5cd1;
	--hm-blue-600: #2563eb; /* canonical */
	--hm-blue-700: #1d53c5;

	/* Gray — body text, borders, backgrounds */
	--hm-gray-300: #e5ecf4; /* bg tints */
	--hm-gray-500: #7c91a6;
	--hm-gray-600: #889cb1; /* canonical */
	--hm-gray-700: #768a9e;

	/* ---------------- Tailwind gray scale used in app ---------------- */
	--gray-50: #f9fafb;
	--gray-100: #f3f4f6;
	--gray-200: #e5e7eb;
	--gray-300: #d1d5db;
	--gray-400: #9ca3af;
	--gray-500: #6b7280;
	--gray-600: #4b5563;
	--gray-700: #374151;
	--gray-800: #1f2937;
	--gray-900: #111827;

	/* ---------------- Semantic / feedback ---------------- */
	--semantic-success: var(--hm-green-600);
	--semantic-info: var(--hm-blue-600);
	--semantic-warning: #f59e0b;
	--semantic-danger: #ef4444;

	/* ---------------- Surfaces ---------------- */
	--surface-app: var(--gray-100); /* body bg */
	--surface-card: #ffffff;
	--surface-sidenav: #f9fafb; /* side-nav-transparent default */
	--surface-elevated: #ffffff;

	/* ---------------- Foreground tokens ---------------- */
	--fg-1: var(--gray-900); /* headings */
	--fg-2: var(--gray-700); /* body strong */
	--fg-3: var(--gray-500); /* body (default body color is text-gray-500) */
	--fg-muted: var(--gray-400);
	--fg-on-brand: #ffffff;
	--fg-link: var(--hm-blue-500);

	/* ---------------- Borders ---------------- */
	--border-default: var(--gray-200); /* card default border */
	--border-strong: var(--gray-300); /* inputs */
	--border-subtle: var(--gray-100);

	/* ---------------- Radii ---------------- */
	--radius-sm: 0.25rem;
	--radius-md: 0.375rem; /* button default (rounded-md) */
	--radius-lg: 0.5rem;   /* card default (rounded-lg) */
	--radius-xl: 0.75rem;
	--radius-pill: 9999px;

	/* ---------------- Shadow ---------------- */
	--shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

	/* ---------------- Spacing scale (tailwind-aligned) ---------------- */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;

	/* ---------------- Layout ---------------- */
	--side-nav-width: 290px;
	--side-nav-collapsed-width: 80px;
	--header-height: 64px;

	/* ---------------- Typography ---------------- */
	--font-sans: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

	/* Tailwind-style font sizes — matches text-sm/md/lg/xl/xxl-custom */
	--text-xs: 0.75rem;            /* 12 / 18 */
	--text-xs-lh: 1rem;
	--text-sm: 0.875rem;           /* 14 / 20 — base body */
	--text-sm-lh: 1.25rem;
	--text-base: 1rem;             /* 16 / 24 */
	--text-base-lh: 1.5rem;
	--text-lg: 1.125rem;           /* 18 */
	--text-lg-lh: 1.75rem;
	--text-xl: 1.25rem;            /* 20 / 30 */
	--text-xl-lh: 1.875rem;
	--text-xxl: 1.5rem;            /* 24 / 36 */
	--text-xxl-lh: 2.25rem;
	--text-3xl: 1.875rem;          /* h2 */
	--text-4xl: 2.25rem;           /* h1 */
}

/* ---------------- Semantic type presets ---------------- */
.type-h1 { font-family: var(--font-sans); font-size: var(--text-4xl); line-height: 2.5rem; font-weight: 700; color: var(--fg-1); letter-spacing: -0.02em; }
.type-h2 { font-family: var(--font-sans); font-size: var(--text-3xl); line-height: 2.25rem; font-weight: 700; color: var(--fg-1); letter-spacing: -0.015em; }
.type-h3 { font-family: var(--font-sans); font-size: var(--text-xxl); line-height: var(--text-xxl-lh); font-weight: 600; color: var(--fg-1); }
.type-h4 { font-family: var(--font-sans); font-size: var(--text-xl); line-height: var(--text-xl-lh); font-weight: 600; color: var(--fg-1); }
.type-h5 { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--text-lg-lh); font-weight: 600; color: var(--fg-1); }
.type-h6 { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--text-base-lh); font-weight: 600; color: var(--fg-1); }
.type-body { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 400; color: var(--fg-3); }
.type-body-strong { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 500; color: var(--fg-2); }
.type-caption { font-family: var(--font-sans); font-size: var(--text-xs); line-height: var(--text-xs-lh); font-weight: 400; color: var(--fg-3); }
.type-label { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--text-sm-lh); font-weight: 500; color: var(--fg-2); }
.type-mono { font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--text-sm-lh); }