/**
 * PflegeBrücke — Design Tokens
 *
 * Single source of truth for color, type, spacing, motion.
 * Everything downstream references these vars.
 */

:root {
	/* ── Color: surfaces ─────────────────────────────────────── */
	--surface-canvas:    #FAFAF7;   /* warm off-white, the page */
	--surface-raised:    #FFFFFF;   /* cards, sheets */
	--surface-sunken:    #F4F3EE;   /* subtle wells, inactive tabs */
	--surface-overlay:   rgba(20, 31, 36, 0.55);

	/* ── Color: ink ──────────────────────────────────────────── */
	--ink-primary:       #141F24;   /* near-black with a green undertone */
	--ink-secondary:     #4A5862;
	--ink-tertiary:      #7A8590;
	--ink-disabled:      #B6BEC5;
	--ink-on-brand:      #FFFFFF;

	/* ── Color: brand ────────────────────────────────────────── */
	/* Deep teal — calm, medical, Swiss-precise without being cold */
	--brand-50:          #ECF5F4;
	--brand-100:         #D2E7E4;
	--brand-200:         #A6CFC9;
	--brand-300:         #6EB0A8;
	--brand-400:         #3F9388;
	--brand-500:         #1F7268;   /* primary */
	--brand-600:         #155A52;
	--brand-700:         #10453F;
	--brand-800:         #0B302C;

	/* ── Color: accent (warmth, used sparingly) ──────────────── */
	--accent-300:        #F5C99A;
	--accent-500:        #E8A55F;   /* call-to-action highlights */
	--accent-700:        #B97A3A;

	/* ── Color: semantic ─────────────────────────────────────── */
	--success-bg:        #E6F4EC;
	--success-fg:        #1B7A3F;
	--warning-bg:        #FFF3DC;
	--warning-fg:        #95620D;
	--danger-bg:         #FCE9E7;
	--danger-fg:         #B23A2C;
	--info-bg:           #E6EFF7;
	--info-fg:           #1F5A8A;

	/* ── Borders ─────────────────────────────────────────────── */
	--border-subtle:     rgba(20, 31, 36, 0.06);
	--border-default:    rgba(20, 31, 36, 0.10);
	--border-strong:     rgba(20, 31, 36, 0.18);
	--border-brand:      var(--brand-500);

	/* ── Radii ───────────────────────────────────────────────── */
	--radius-xs:  4px;
	--radius-sm:  6px;
	--radius-md:  10px;
	--radius-lg:  14px;
	--radius-xl:  20px;
	--radius-2xl: 28px;
	--radius-full: 9999px;

	/* ── Shadows — layered, never harsh ──────────────────────── */
	--shadow-xs: 0 1px 2px rgba(20, 31, 36, 0.04);
	--shadow-sm: 0 1px 2px rgba(20, 31, 36, 0.04), 0 2px 6px rgba(20, 31, 36, 0.04);
	--shadow-md: 0 2px 4px rgba(20, 31, 36, 0.04), 0 6px 16px rgba(20, 31, 36, 0.06);
	--shadow-lg: 0 4px 8px rgba(20, 31, 36, 0.05), 0 18px 40px rgba(20, 31, 36, 0.10);
	--shadow-focus: 0 0 0 3px rgba(31, 114, 104, 0.22);

	/* ── Type ────────────────────────────────────────────────── */
	--font-sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--font-display: 'Fraunces', 'Inter', Georgia, serif; /* a touch of warmth for headings */
	--font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

	--text-xs:   12px;
	--text-sm:   13px;
	--text-base: 15px;
	--text-md:   16px;
	--text-lg:   18px;
	--text-xl:   22px;
	--text-2xl:  28px;
	--text-3xl:  36px;
	--text-4xl:  48px;
	--text-5xl:  64px;

	--leading-tight:  1.15;
	--leading-snug:   1.3;
	--leading-normal: 1.5;
	--leading-relaxed: 1.65;

	--tracking-tight:  -0.02em;
	--tracking-normal: 0;
	--tracking-wide:   0.04em;

	/* ── Spacing — 4px scale ─────────────────────────────────── */
	--space-1:  4px;
	--space-2:  8px;
	--space-3:  12px;
	--space-4:  16px;
	--space-5:  20px;
	--space-6:  24px;
	--space-8:  32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* ── Layout ──────────────────────────────────────────────── */
	--container-narrow: 720px;
	--container-base:   1120px;
	--container-wide:   1280px;
	--sidebar-width:    260px;
	--header-height:    72px;

	/* ── Motion ──────────────────────────────────────────────── */
	/* Strong custom curves — built-in CSS easings are too soft. */
	--ease-out:        cubic-bezier(0.23, 1, 0.32, 1);
	--ease-in-out:     cubic-bezier(0.77, 0, 0.175, 1);
	--ease-drawer:     cubic-bezier(0.32, 0.72, 0, 1);
	--ease-snap:       cubic-bezier(0.16, 1, 0.3, 1);

	--dur-instant: 100ms;
	--dur-fast:    160ms;
	--dur-base:    200ms;
	--dur-medium:  260ms;
	--dur-slow:    360ms;

	/* ── Z-index scale ───────────────────────────────────────── */
	--z-base:    1;
	--z-raised:  10;
	--z-sticky:  100;
	--z-overlay: 1000;
	--z-modal:   1100;
	--z-toast:   1200;
}