/* ==========================================================================
   BMI Kalkulator - Design tokens (single source of truth)
   --------------------------------------------------------------------------
   RULES
   1. Page and component CSS must consume the SEMANTIC tokens below.
      Never reference the raw grayscale ramp directly.
   2. To rebrand the whole site, edit only these four values in :root and
      their counterparts inside [data-theme="dark"]:
          --color-primary  --color-primary-hover
          --color-primary-light  --color-primary-contrast
   3. Optional brand skins are exposed as .Red / .Blue on <html>.
   4. Keep every --x-rgb companion in sync with its --x value.
   ========================================================================== */

:root {
	/* ---------- Typography ---------- */
	--font-display: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--font-family-api: "SF Mono", "Fira Code", "Consolas", monospace;
	--font-family-ui: "Segoe UI", SegoeUI, "Helvetica Neue", Helvetica, Arial,
		sans-serif;

	/* ---------- Corner radii ---------- */
	--radius-lg: 22px;
	--radius-md: 14px;

	/* ---------- Grayscale ramp (contrast ratios noted for AA checks) ---------- */
	--gray-0: #FFFFFF;   /* pure white */
	--gray-1: #F6F8F7;   /* page background tint */
	--gray-2: #E6EAE8;   /* border / divider */
	--gray-3: #D3D9D6;   /* weak border */
	--gray-4: #A2AAA6;   /* placeholder / disabled text (2.9:1) */
	--gray-5: #6F7873;   /* tertiary text (4.6:1) */
	--gray-6: #4F5754;   /* secondary text (7.2:1) */
	--gray-7: #3B4240;   /* primary text (9.9:1) */
	--gray-8: #232928;   /* heading text (14.5:1) */
	--gray-9: #161A19;   /* dark base */
	--gray-A: #000000;   /* pure black */

	/* RGB companions - used to compose translucent colors without hardcoding */
	--gray-0-rgb: 255, 255, 255;
	--gray-1-rgb: 246, 248, 247;
	--gray-2-rgb: 230, 234, 232;
	--gray-3-rgb: 211, 217, 214;
	--gray-4-rgb: 162, 170, 166;
	--gray-5-rgb: 111, 120, 115;
	--gray-6-rgb: 79, 87, 84;
	--gray-7-rgb: 59, 66, 64;
	--gray-8-rgb: 35, 41, 40;
	--gray-9-rgb: 22, 26, 25;
	--gray-A-rgb: 0, 0, 0;

	/* ---------- Semantic: text ---------- */
	--text-primary: var(--gray-8);      /* headings / body core */
	--text-secondary: var(--gray-6);    /* supporting copy */
	--text-tertiary: var(--gray-5);     /* auxiliary / placeholder */
	--text-disabled: var(--gray-4);     /* disabled state */
	--text-inverse: var(--gray-0);      /* text on dark surfaces */

	/* ---------- Semantic: background ---------- */
	--bg-base: var(--gray-0);           /* page background */
	--bg-elevated: var(--gray-1);       /* cards / menus / dialogs */
	--bg-inset: var(--gray-2);          /* inputs / tables / sunken areas */
	--bg-overlay: rgba(var(--gray-A-rgb), 0.8); /* modal scrim */

	--bg-trans-subtle: rgba(var(--gray-2-rgb), 0.8);
	--bg-trans-hover: rgba(var(--gray-4-rgb), 0.2);

	/* ---------- Semantic: border ---------- */
	--border-subtle: var(--gray-2);     /* faintest divider */
	--border-default: var(--gray-3);    /* regular border (inputs, tables) */
	--border-strong: var(--gray-4);     /* emphasized border (active, focus) */

	/* ---------- Semantic: shadow ---------- */
	--shadow-card: 0 5px 10px rgba(var(--gray-9-rgb), 0.08),
		0 1px 2px rgba(var(--gray-9-rgb), 0.05);
	--shadow-drop: 0 8px 24px rgba(var(--gray-9-rgb), 0.12);
	--shadow-inset: inset 5px 5px 5px 2px rgba(var(--gray-2-rgb), 0.5);

	/* ---------- Brand (healthy green) ---------- */
	--primary-rgb: 22, 163, 74;
	--color-primary: #16A34A;           /* brand green (contrast 3.9:1 on white) */
	--color-primary-hover: #15803D;     /* hover / active state */
	--color-primary-light: #DCFCE7;     /* light surface for badges / tags */
	--color-primary-contrast: #FFFFFF;  /* text / icon placed on primary surfaces */

	/* ---------- Functional ---------- */
	--success-rgb: 22, 163, 74;
	--color-success: #16A34A;
	--color-success-bg: #DCFCE7;

	--warning-rgb: 217, 119, 6;
	--color-warning: #D97706;
	--color-warning-bg: #FEF3C7;

	--danger-rgb: 220, 38, 38;
	--color-danger: #DC2626;
	--color-danger-bg: #FEE2E2;

	--color-info: #6B7280;
	--color-info-bg: #F3F4F6;

	/* ---------- BMI category scale (WHO cut-offs) ---------- */
	--bmi-under: #3B82F6;         /* underweight */
	--bmi-under-bg: #DBEAFE;
	--bmi-normal: #16A34A;        /* normal weight */
	--bmi-normal-bg: #DCFCE7;
	--bmi-over: #D97706;          /* overweight */
	--bmi-over-bg: #FEF3C7;
	--bmi-obese: #DC2626;         /* obese */
	--bmi-obese-bg: #FEE2E2;

	/* ---------- Spacing ---------- */
	--space-s: 5px;
	--space-m: 10px;
	--space-l: 20px;
	--space-x: 30px;

	/* ---------- Radius scale ---------- */
	--radius-s: 5px;
	--radius-m: 10px;
	--radius-l: 15px;
	--radius-x: 20px;
	--radius-full: 9999px;

	/* ---------- Font sizes ---------- */
	--font-size-t: 12px;   /* tiny labels (auxiliary only) */
	--font-size-s: 14px;   /* small */
	--font-size-m: 16px;   /* medium - site default */
	--font-size-b: 18px;   /* big - body / mobile headings */
	--font-size-l: 20px;   /* large - subheading */
	--font-size-h: 24px;   /* huge - subheading */
	--font-size-e: 28px;   /* enormous - hero heading */

	/* ---------- Layout ---------- */
	--container-w: 1180px;
	--header-h: 64px;

	/* ---------- Motion ---------- */
	--transition-fast: 0.15s ease;
	--transition-base: 0.22s ease;

	/* ---------- Mobile tap highlight (replaces the default blue-gray) ---------- */
	--tap-highlight-color: rgba(var(--gray-4-rgb), 0.3);
}

/* ==========================================================================
   Dark theme override
   ========================================================================== */
[data-theme="dark"] {
	/* ---------- Inverted grayscale base (keeps AA contrast on dark) ---------- */
	--gray-0: #161A19;   /* main background */
	--gray-1: #1F2523;   /* cards / elevated surfaces */
	--gray-2: #2C3331;   /* inputs / sunken areas */
	--gray-3: #414947;   /* faint divider */
	--gray-4: #5C6663;   /* strong border */
	--gray-5: #858F8C;   /* disabled text (disabled state only) */
	--gray-6: #A3ACA9;   /* tertiary text (4.8:1 - passes) */
	--gray-7: #C4CCC9;   /* secondary text (7.6:1) */
	--gray-8: #E1E6E4;   /* primary text (12:1) */
	--gray-9: #F5F7F6;   /* headings / inverse text */
	--gray-A: #FFFFFF;   /* pure white */

	--gray-0-rgb: 22, 26, 25;
	--gray-1-rgb: 31, 37, 35;
	--gray-2-rgb: 44, 51, 49;
	--gray-3-rgb: 65, 73, 71;
	--gray-4-rgb: 92, 102, 99;
	--gray-5-rgb: 133, 143, 140;
	--gray-6-rgb: 163, 172, 169;
	--gray-7-rgb: 196, 204, 201;
	--gray-8-rgb: 225, 230, 228;
	--gray-9-rgb: 245, 247, 246;
	--gray-A-rgb: 255, 255, 255;

	--text-inverse: var(--gray-A);

	/* ---------- Semantic tokens inherit the new ramp (overlay excepted) ---------- */
	--bg-overlay: rgba(var(--gray-0-rgb), 0.82);
	--bg-trans-subtle: rgba(var(--gray-2-rgb), 0.8);
	--bg-trans-hover: rgba(var(--gray-4-rgb), 0.3);

	/* ---------- Dark-mode shadows (stop black shadows from vanishing) ---------- */
	--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4);
	--shadow-drop: 0 8px 24px rgba(0, 0, 0, 0.7);

	/* ---------- Brand on dark: lifted green keeps 7:1 against #161A19 ---------- */
	--primary-rgb: 74, 222, 128;
	--color-primary: #4ADE80;
	--color-primary-hover: #86EFAC;
	--color-primary-light: #14532D;
	--color-primary-contrast: #06140C;

	--color-success: #4ADE80;
	--color-success-bg: #14532D;

	--color-warning: #FBBF24;
	--color-warning-bg: #3D2E1A;

	--color-danger: #F87171;
	--color-danger-bg: #3D1A1A;

	--color-info: #9CA3AF;
	--color-info-bg: #2A2A2A;

	/* ---------- BMI category scale on dark ---------- */
	--bmi-under: #60A5FA;
	--bmi-under-bg: #1E3A5F;
	--bmi-normal: #4ADE80;
	--bmi-normal-bg: #14532D;
	--bmi-over: #FBBF24;
	--bmi-over-bg: #4A3410;
	--bmi-obese: #F87171;
	--bmi-obese-bg: #4A1D1D;

	--tap-highlight-color: rgba(var(--gray-4-rgb), 0.5);
}

/* ==========================================================================
   Optional brand skins - add class="Red" or class="Blue" to <html>.
   The default green skin needs no class.
   ========================================================================== */
.Red {
	--primary-rgb: 174, 15, 55;
	--color-primary: #AE0F37;
	--color-primary-hover: #D81344;
	--color-primary-light: #FBD5DE;
	--color-primary-contrast: #FFFFFF;
}

.Red[data-theme="dark"] {
	--primary-rgb: 235, 20, 74;
	--color-primary: #EB144A;
	--color-primary-hover: #F2698B;
	--color-primary-light: #960D2F;
	--color-primary-contrast: #FFFFFF;
}

.Blue {
	--primary-rgb: 29, 78, 216;
	--color-primary: #1D4ED8;
	--color-primary-hover: #2563EB;
	--color-primary-light: #DBEAFE;
	--color-primary-contrast: #FFFFFF;
}

.Blue[data-theme="dark"] {
	--primary-rgb: 96, 165, 250;
	--color-primary: #60A5FA;
	--color-primary-hover: #93C5FD;
	--color-primary-light: #1E3A8A;
	--color-primary-contrast: #0B1220;
}