/**
 * Karema design tokens — mapped 1:1 to CLAUDE.md's approved palette,
 * plus values derived from PHASE1-AUTH-SPEC.md.
 */

:root {
	/* Brand palette (CLAUDE.md) */
	--karema-teal: #01a2aa;
	--karema-deep: #006b70;
	--karema-accent: #f4b860;
	--karema-charcoal: #1f2933;
	--karema-mint: #e6f7f8;
	--karema-white: #ffffff;
	--karema-bg: #f8fafa;

	/* Derived tokens from the auth spec */
	--karema-border: rgba(0, 0, 0, 0.3);
	--karema-secondary: rgba(0, 0, 0, 0.4);
	--karema-secondary-strong: rgba(0, 0, 0, 0.55);

	/* Radii */
	--karema-radius-sm: 4px;
	--karema-radius-md: 5px;

	/* Fluid type scale — clamp() between the 390px and 1440px design widths */
	--karema-fs-body: clamp(0.8125rem, 0.74rem + 0.35vw, 0.875rem);
	--karema-fs-label: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
	--karema-fs-helper: clamp(0.6875rem, 0.66rem + 0.1vw, 0.6875rem);
	--karema-fs-title: clamp(1rem, 0.86rem + 0.7vw, 1.5rem);
	--karema-fs-heading: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
	--karema-fs-nav: 1rem;

	/* Fluid spacing */
	--karema-space-card-y: clamp(1.5rem, 1rem + 2vw, 3.5rem);
	--karema-container-max: 1200px;
	--karema-container-pad: clamp(1rem, 0.5rem + 2vw, 2rem);
}