/* ═══════════════════════════════════════════════════════════════
   LIQUID GLASS — Design Tokens
   Source: dev.liquid-layout.markattack.ch/mockups/liquid-glass.css
   ═══════════════════════════════════════════════════════════════ */

:root {
	/* Brand */
	--teal:        #008290;
	--teal-2:      #0095A9;
	--teal-dark:   #006d7a;
	--teal-dim:    rgba(0,130,144,.12);
	--teal-glow:   rgba(0,130,144,.22);
	--yellow:      #ffcb05;
	--yellow-dark: #c79500;
	--red:         #EC627E;
	--green:       #00A85E;

	/* Surfaces */
	--field-bg:     #f3f6f7;
	--track-bg:     #e6eef0;
	--glass-white:  rgba(255,255,255,.72);
	--glass-white2: rgba(255,255,255,.55);
	--glass-white3: rgba(255,255,255,.38);
	--glass-teal:   rgba(0,130,144,.10);
	--glass-active: rgba(0,130,144,.14);
	--spec:         rgba(255,255,255,.90);
	--spec-dim:     rgba(255,255,255,.60);

	/* Ink (text) */
	--ink:   #0f2427;
	--ink-2: #2d4347;
	--ink-3: #5c7478;
	--ink-4: #97b0b3;

	/* Blur */
	--blur-sm: blur(12px);
	--blur-md: blur(20px);
	--blur-lg: blur(32px);

	/* Radius */
	--r-sm:   8px;
	--r-md:   12px;
	--r-lg:   16px;
	--r-xl:   20px;
	--r-pill: 999px;

	/* Layout metrics */
	--sb-w: 256px;
	--sb-c: 68px;
	--hh:   67px;

	/* Typography */
	--ff: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	/* Shadows */
	--sh-glass: 0 8px 32px rgba(0,60,80,.10), 0 2px 8px rgba(0,60,80,.06);
	--sh-card:  0 4px 20px rgba(0,60,80,.08), 0 1px 4px rgba(0,60,80,.05);
	--sh-glow:  0 0 20px var(--teal-glow);
}