/*
Call render_tokens() from DevTools console to:
	1. Parse all CSS variables grouped by section comments (\ /* ========== Section ========== *\ /).
	2. Collect token name, value, and inline comments.
	3. Optionally normalize values (e.g., colors, spacing).
	4. Render ready-to-use HTML and JSON.
	5. Prompt the user to download tokens.html and tokens.json.
*/

/* Full brand pallete */
/* https://coolors.co/48d4cb-f3c33f-1e2428-f3f6f6-fbfbfd */
/* https://www.pexels.com/ru-ru/search/nature/?color=48D4CB&orientation=landscape */
/* https://www.realtimecolors.com/?colors=3e383a-ffffff-49d4cb-f3c33f-cb49d4&fonts=Manrope-Manrope */

/* Icons pack */
/* https://feathericons.com */
/* https://lucide.dev/icons */
/* https://phosphoricons.com */

:root {
	/* ========== Brand ========== */
	--primary-50: oklch(95.672% 0.02726 191.09); /* Main brand color */
	--primary-50: oklch(0.96 0.02 182.66); /* Main brand color */
	--primary-50: oklch(95.672% 0.02726 191.09); /* Main brand color */
	--primary-100: oklch(93.601% 0.04036 192.66); /* Lightest tint */
	--primary-200: oklch(89.605% 0.06453 191.21); /* Extra light bg */
	--primary-300: oklch(86.08% 0.08711 190.2); /* Card background */
	--primary-400: oklch(82.563% 0.10536 189.22); /* Hover states */
	--primary-500: oklch(79.368% 0.11874 188.89); /* Base elements */
	--primary-600: oklch(71.217% 0.11523 187.66); /* Default brand */
	--primary-700: oklch(57.798% 0.09205 188.24); /* Active states */
	--primary-800: oklch(43.807% 0.06847 188.08); /* Headings, accents */
	--primary-900: oklch(28.276% 0.0412 189.99); /* Dark surfaces */
	--primary-950: oklch(20.027% 0.0267 186.68); /* Text on light */

	/* ========== Secondary ========== */
	--secondary-50: oklch(98.246% 0.01792 89.355); /* Main accent */
	--secondary-100: oklch(96.521% 0.03569 89.441); /* Lightest tint */
	--secondary-200: oklch(93.058% 0.07119 90.661); /* Subtle bg */
	--secondary-300: oklch(89.839% 0.10331 90.04); /* Card bg */
	--secondary-400: oklch(86.672% 0.13149 89.725); /* Hover bg */
	--secondary-500: oklch(83.781% 0.15159 87.883); /* Base elements */
	--secondary-600: oklch(79.063% 0.16011 83.814); /* Default accent */
	--secondary-700: oklch(65.583% 0.13221 84.725); /* Active states */
	--secondary-800: oklch(51.273% 0.10248 84.539); /* Strong accents */
	--secondary-900: oklch(35.977% 0.07025 86.749); /* Dark surfaces */
	--secondary-950: oklch(27.512% 0.05281 89.217); /* Text on light */

	/* ========== Accent ========== */
	--accent-50: oklch(98.965% 0.00511 247.88); /* Main accent */
	--accent-100: oklch(97.588% 0.01197 247.95); /* Lightest tint */
	--accent-200: oklch(89.756% 0.05223 248.41); /* Subtle bg */
	--accent-300: oklch(82.155% 0.09334 249.02); /* Card bg */
	--accent-400: oklch(74.944% 0.13396 250.04); /* Hover bg */
	--accent-500: oklch(68.351% 0.17187 251.92); /* Base elements */
	--accent-600: oklch(62.643% 0.20438 255.27); /* Default accent */
	--accent-700: oklch(55.203% 0.18928 256.11); /* Active states */
	--accent-800: oklch(46.662% 0.15745 255.68); /* Strong accents */
	--accent-900: oklch(37.71% 0.12393 254.94); /* Dark surfaces */
	--accent-950: oklch(33.162% 0.10568 254.03); /* Text on light */

	/* ========== Surfaces ========== */
	--surface-global: #fbfbfd; /* App background */
	--surface-secondary: #f3f6f6; /* Card surface */
	--surface-inverse: #1e2428; /* Footer/hero dark */

	/* ========== Info ========== */
	--info-50: oklch(88.1% 0.05357 260.65); /* Lightest bg */
	--info-100: oklch(84.274% 0.07192 259.54); /* Subtle bg */
	--info-200: oklch(76.642% 0.11134 259.88); /* Card bg */
	--info-300: oklch(69.234% 0.15016 259.73); /* Hover bg */
	--info-400: oklch(62.308% 0.18801 259.81); /* Base fill */
	--info-500: oklch(54.027% 0.22497 261.01); /* Default info */
	--info-600: oklch(44.935% 0.18311 260.8); /* Active state */
	--info-700: oklch(35.47% 0.13993 260.64); /* Strong text */
	--info-800: oklch(25.248% 0.0914 260.07); /* Dark surface */
	--info-900: oklch(14.169% 0.03449 249.5); /* Contrast text */

	/* ========== Danger ========== */
	--danger-50: oklch(90.442% 0.04957 18.108); /* Lightest bg */
	--danger-100: oklch(86.071% 0.07521 18.727); /* Subtle bg */
	--danger-200: oklch(78.133% 0.12774 19.786); /* Card bg */
	--danger-300: oklch(71.455% 0.1788 22.703); /* Hover bg */
	--danger-400: oklch(66.369% 0.22303 25.471); /* Base fill */
	--danger-500: oklch(63.51% 0.25044 28.275); /* Default danger */
	--danger-600: oklch(57.322% 0.23517 29.161); /* Active state */
	--danger-700: oklch(46.349% 0.19011 29.096); /* Strong text */
	--danger-800: oklch(34.668% 0.14226 29.234); /* Dark surface */
	--danger-900: oklch(21.882% 0.08979 29.234); /* Contrast text */
	--danger-950: oklch(14.759% 0.06056 29.234); /* Deepest tone */

	/* ========== Warning ========== */
	--warning-50: oklch(97.148% 0.0242 77.463); /* Lightest bg */
	--warning-100: oklch(95.302% 0.04272 79.801); /* Subtle bg */
	--warning-200: oklch(91.24% 0.07831 79.751); /* Card bg */
	--warning-300: oklch(87.485% 0.11092 78.152); /* Hover bg */
	--warning-400: oklch(83.957% 0.1396 76.154); /* Base fill */
	--warning-500: oklch(79.569% 0.16541 70.665); /* Default warn */
	--warning-600: oklch(71.163% 0.15735 66.765); /* Active state */
	--warning-700: oklch(57.987% 0.1274 67.513); /* Strong text */
	--warning-800: oklch(43.871% 0.0948 69.57); /* Dark surface */
	--warning-900: oklch(28.258% 0.06007 73.406); /* Contrast text */
	--warning-950: oklch(19.762% 0.04091 80.167); /* Deepest tone */

	/* ========== Gradients ========== */
	--gradient-primary: linear-gradient(135deg, var(--primary-500), var(--primary-100)); /* Brand gradient */
	--gradient-secondary: linear-gradient(135deg, var(--secondary-500), var(--secondary-200)); /* Accent gradient */
}
:root {
	/*
		These tokens represent a custom, data-driven system for responsive containers.
		They are calculated to provide optimal max-width values that are guaranteed to fit within specific breakpoints (mobile-first)
		and align with a virtual column grid.
		This increases the predictability of component responsive behavior and reduces the need for manual adjustments.
		For calculating correct values, use the design system's helper: calculate_grid(container_max, gap, cols);
	*/

	/* ========== Aliases ========== */
	--container-2-cols: 252px; /* 2-column layout */
	--container-3-cols: 374px; /* 3-column layout */
	--container-4-cols: 510px; /* 4-column layout */
	--container-6-cols: 762px; /* 6-column layout */
	--container-8-cols: 1020px; /* 8-column layout */
	--container-10-cols: 1280px; /* 10-column layout */

	/* ========== Containers ========== */
	--container-full: 100%; /* Full fluid width */
	--container-xs: 300px; /* Extra small max */
	--container-sm: 480px; /* Small max */
	--container-small: var(--container-3-cols); /* Alias 3-col */
	--container-mobile: var(--container-4-cols); /* Mobile max */
	--container-tablet: var(--container-6-cols); /* Tablet max */
	--container-laptop: var(--container-8-cols); /* Laptop max */
	--container-desktop: var(--container-10-cols); /* Desktop max */
	--container-max: 1540px; /* Largest content */
}
:root {
	/* ========== Height ========== */
	--height-header: 6rem; /* Hero / extended header */
	--height-navbar: 4rem; /* Standard navbar */
	--height-topbar: 3.5rem; /* Mobile topbar */
	--height-sticky: 2.5rem; /* Sticky toolbar */
	--height-safe: 100dvh; /* Mobile safe height */
	--height-full: 100%; /* Parent relative */
	--height-screen: 100vh; /* Full viewport */

	/* ========== Grid ========== */
	--grid-split-1: repeat(1, 1fr); /* Single column */
	--grid-split-2: repeat(2, 1fr); /* Two columns */
	--grid-split-3: repeat(3, 1fr); /* Three columns */
	--grid-split-4: repeat(4, 1fr); /* Four columns */
	--grid-split-6: repeat(6, 1fr); /* Six columns */
	--grid-split-12: repeat(12, 1fr); /* Full grid */

	/* ========== MicroSpacing ========== */
	--mspace-xs: 0.25rem; /* Icon padding, hairline adjustments */
	--mspace-ux: 0.5rem; /* Decorative accents, compact gaps */
	--mspace-sm: 0.75rem; /* Small cards, form elements */
	--mspace-md: 1rem; /* Base spacing unit */
	--mspace-lg: 1.25rem; /* Groups of components */
	--mspace-xl: 1.5rem; /* Block-level spacing */
	--mspace-ex: 1.75rem; /* List items, subtitles */

	/* ========== MacroSpacing ========== */
	--lspace-sm: 2rem; /* Section padding */
	--lspace-md: 3rem; /* Content blocks, layout gaps */
	--lspace-lg: 4rem; /* Hero sections, grid separation */
	--lspace-xl: 5rem; /* Full-width sections */
	--lspace-ex: 6.25rem; /* Large layouts, page structure */

	/* ========== Layers ========== */
	--z-base: 0; /* Default layer */
	--z-under: -1; /* Below content */
	--z-above: 10; /* Above base */
	--z-overlay: 100; /* Overlays */
	--z-modal: 1000; /* Modals */
	--z-tooltip: 10000; /* Tooltips */

	/* ========== Radius ========== */
	--radius-sm: 0.125rem; /* Small badges */
	--radius-md: 0.25rem; /* Buttons, dropdown */
	--radius-lg: 0.5rem; /* Large buttons */
	--radius-xl: 0.75rem; /* Sheets, popovers */
	--radius-2xl: 1rem; /* Sheets, popovers */
	--radius-3xl: 1.25rem; /* Sheets, popovers */
	--radius-pill: 3rem; /* Pills, inputs */
	--radius-circle: 50%; /* Avatars, circles */

	/* ========== Shadows ========== */
	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05); /* Subtle shadow */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); /* Small shadow */
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); /* Card shadow */
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1); /* Modal shadow */
	--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15); /* Deep shadow */
	--shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06); /* Inset shadow */

	/* ========== Aspect ========== */
	--aspect-16x9: 16 / 9; /* Video / YouTube */
	--aspect-4x3: 4 / 3; /* Slides / previews */
	--aspect-3x2: 3 / 2; /* Articles / photos */
	--aspect-2x1: 2 / 1; /* Hero blocks */
	--aspect-golden: 1.618; /* Golden ratio cards */
	--aspect-square: 1; /* Square alias */
	--aspect-9x16: 9 / 16; /* Stories / reels */
	--aspect-2x3: 2 / 3; /* Posters / books */
	--aspect-auto: auto; /* No fixed ratio */

	/* ========== Opacity ========== */
	--opacity-subtle: 0.08; /* Dividers / faint lines */
	--opacity-low: 0.2; /* Placeholders */
	--opacity-disabled: 0.38; /* Disabled state */
	--opacity-overlay: 0.5; /* Overlays */
	--opacity-muted: 0.64; /* Muted text/icons */
	--opacity-solid: 0.9; /* Active states */

	/* ========== Letters ========== */
	--track-tightest: -0.05em; /* Display titles */
	--track-tighter: -0.02em; /* Display titles */
	--track-tight: -0.01em; /* Large headings */
	--track-normal: 0; /* Default text */
	--track-wide: 0.01em; /* Labels / captions */
	--track-wider: 0.02em; /* UI elements */
	--track-widest: 0.5em; /* Small caps / tags */

	/* ========== Line ========== */
	--line-tight: 1.15; /* Headings */
	--line-snug: 1.25; /* Subtitles */
	--line-normal: 1.4; /* Body text */
	--line-relaxed: 1.6; /* Long text */
	--line-loose: 1.8; /* Reading comfort */
	--line-wide: 2; /* Extra airy */

	/* ========== Motion ========== */
	--motion-fast: 150ms ease-out; /* Micro-interactions (hover, tap feedback) */
	--motion-normal: 300ms ease-in-out; /* Standard UI transitions (dropdowns, modals) */
	--motion-slow: 500ms ease-in; /* Large movements (page transitions, carousels) */
	--motion-delayed: 700ms ease-in-out; /* Hero sections, storytelling animations */
	--motion-snappy: 100ms linear; /* System feedback (ripple, keypress) */
}
:root {
	/* Font sizes - https://www.fluid-type-scale.com/calculate */
	/* sm,md,lg,xl,ex,pt,dp: 1.25-1.32/14px-16px/400px-1920px  */

	/* Font size calculation */
	--w-min: 400; /* в px */
	--w-max: 1920; /* в px */
	--base-min-px: 14; /* px @ w-min */
	--base-max-px: 16; /* px @ w-max */
	--ratio-min: 1.25; /* scale @ w-min */
	--ratio-max: 1.32; /* scale @ w-max */
	--rem-px: 16;

	/* BASE VALUES IN REM (converted at start) */
	--base-min-rem: calc(var(--base-min-px) / var(--rem-px));
	--base-max-rem: calc(var(--base-max-px) / var(--rem-px));

	/* RANGE CALCULATION FOR EACH STEP (in rem) */
	/* k: sm=-1, md=0, lg=1, xl=2, ex=3, pt=4, dp=5 */
	--min-sm-rem: calc(var(--base-min-rem) / var(--ratio-min));
	--max-sm-rem: calc(var(--base-max-rem) / var(--ratio-max));

	--min-md-rem: var(--base-min-rem);
	--max-md-rem: var(--base-max-rem);

	--min-lg-rem: calc(var(--base-min-rem) * var(--ratio-min));
	--max-lg-rem: calc(var(--base-max-rem) * var(--ratio-max));

	--min-xl-rem: calc(var(--min-lg-rem) * var(--ratio-min));
	--max-xl-rem: calc(var(--max-lg-rem) * var(--ratio-max));

	--min-ex-rem: calc(var(--min-xl-rem) * var(--ratio-min));
	--max-ex-rem: calc(var(--max-xl-rem) * var(--ratio-max));

	--min-pt-rem: calc(var(--min-ex-rem) * var(--ratio-min));
	--max-pt-rem: calc(var(--max-ex-rem) * var(--ratio-max));

	--min-dp-rem: calc(var(--min-pt-rem) * var(--ratio-min));
	--max-dp-rem: calc(var(--max-pt-rem) * var(--ratio-max));

	/* s = (max_rem - min_rem) / w_span; A = 100 * s * rem_px; B = min_rem - s * w_min */
	--w-span: calc(var(--w-max) - var(--w-min));

	--s-sm: calc((var(--max-sm-rem) - var(--min-sm-rem)) / var(--w-span));
	--A-sm: calc(100 * var(--s-sm) * var(--rem-px));
	--B-sm: calc(var(--min-sm-rem) - var(--s-sm) * var(--w-min));

	--s-md: calc((var(--max-md-rem) - var(--min-md-rem)) / var(--w-span));
	--A-md: calc(100 * var(--s-md) * var(--rem-px));
	--B-md: calc(var(--min-md-rem) - var(--s-md) * var(--w-min));

	--s-lg: calc((var(--max-lg-rem) - var(--min-lg-rem)) / var(--w-span));
	--A-lg: calc(100 * var(--s-lg) * var(--rem-px));
	--B-lg: calc(var(--min-lg-rem) - var(--s-lg) * var(--w-min));

	--s-xl: calc((var(--max-xl-rem) - var(--min-xl-rem)) / var(--w-span));
	--A-xl: calc(100 * var(--s-xl) * var(--rem-px));
	--B-xl: calc(var(--min-xl-rem) - var(--s-xl) * var(--w-min));

	--s-ex: calc((var(--max-ex-rem) - var(--min-ex-rem)) / var(--w-span));
	--A-ex: calc(100 * var(--s-ex) * var(--rem-px));
	--B-ex: calc(var(--min-ex-rem) - var(--s-ex) * var(--w-min));

	--s-pt: calc((var(--max-pt-rem) - var(--min-pt-rem)) / var(--w-span));
	--A-pt: calc(100 * var(--s-pt) * var(--rem-px));
	--B-pt: calc(var(--min-pt-rem) - var(--s-pt) * var(--w-min));

	--s-dp: calc((var(--max-dp-rem) - var(--min-dp-rem)) / var(--w-span));
	--A-dp: calc(100 * var(--s-dp) * var(--rem-px));
	--B-dp: calc(var(--min-dp-rem) - var(--s-dp) * var(--w-min));

	/* ========== Typescale ========== */
	--font-size-xs: clamp(calc(var(--min-sm-rem) * 1rem), calc(var(--A-sm) * 1vi + var(--B-sm) * 1rem), calc(var(--max-sm-rem) * 1rem)); /* Label text - 12px */
	--font-size-sm: clamp(0.75rem, 0.13vi + 0.72rem, 0.88rem); /* Small text - 14px */
	--font-size-md: clamp(calc(var(--min-md-rem) * 1rem), calc(var(--A-md) * 1vi + var(--B-md) * 1rem), calc(var(--max-md-rem) * 1rem)); /* Body text - 16px */
	--font-size-lg: clamp(calc(var(--min-lg-rem) * 1rem), calc(var(--A-lg) * 1vi + var(--B-lg) * 1rem), calc(var(--max-lg-rem) * 1rem)); /* Lead text - 21px */
	--font-size-xl: clamp(calc(var(--min-xl-rem) * 1rem), calc(var(--A-xl) * 1vi + var(--B-xl) * 1rem), calc(var(--max-xl-rem) * 1rem)); /* Headings - 28px */
	--font-size-ex: clamp(calc(var(--min-ex-rem) * 1rem), calc(var(--A-ex) * 1vi + var(--B-ex) * 1rem), calc(var(--max-ex-rem) * 1rem)); /* Extra large - 36px */
	--font-size-pt: clamp(calc(var(--min-pt-rem) * 1rem), calc(var(--A-pt) * 1vi + var(--B-pt) * 1rem), calc(var(--max-pt-rem) * 1rem)); /* Page titles - 48px */
	--font-size-dp: clamp(calc(var(--min-dp-rem) * 1rem), calc(var(--A-dp) * 1vi + var(--B-dp) * 1rem), calc(var(--max-dp-rem) * 1rem)); /* Display size - 64px */
}
:root {
	/* Text color - https://leonardocolor.io */
	/* Base color ~500–600 shade */
	--text-base: #756c75;

	--c-50: 0.23;
	--c-100: 0.33;
	--c-200: 0.5;
	--c-300: 0.59;
	--c-400: 0.87;
	--c-500: 1;
	--c-600: 0.82;
	--c-700: 0.77;
	--c-800: 0.49;
	--c-900: 0.43;
	--c-950: 0.22;

	/*--text-strong: ≥ 7:1 (AAA normal, AA small — extra safe)*/
	/*--text-primary: ≥ 4.5:1 (AA small)*/
	/*--text-muted: ≈ 3.0–3.5:1 (secondary text, non-critical)*/
	/*--text-disabled: ≈ 2.0–3.0:1 (visually muted, not for key text)*/
	/*--text-inverse: ≥ 4.5:1 on dark bg (--surface-inverse)*/

	--neutral-50: oklch(from var(--text-base) clamp(0, calc(l + (1 - l) * 0.73), 1) calc(c * var(--c-50)) h);
	--neutral-100: oklch(from var(--text-base) calc(l + (1 - l) * 0.65) calc(c * var(--c-100)) h);
	--neutral-200: oklch(from var(--text-base) calc(l + (1 - l) * 0.5) calc(c * var(--c-200)) h);
	--neutral-300: oklch(from var(--text-base) calc(l + (1 - l) * 0.34) calc(c * var(--c-300)) h);
	--neutral-400: oklch(from var(--text-base) calc(l + (1 - l) * 0.17) calc(c * var(--c-400)) h);
	--neutral-500: oklch(from var(--text-base) l calc(c * var(--c-500)) h);
	--neutral-600: oklch(from var(--text-base) calc(l * 0.88) calc(c * var(--c-600)) h);
	--neutral-700: oklch(from var(--text-base) calc(l * 0.76) calc(c * var(--c-700)) h);
	--neutral-800: oklch(from var(--text-base) calc(l * 0.64) calc(c * var(--c-800)) h);
	--neutral-900: oklch(from var(--text-base) calc(l * 0.5) calc(c * var(--c-900)) h);
	--neutral-950: oklch(from var(--text-base) calc(l * 0.41) calc(c * var(--c-950)) h);

	/* ========== Facecolor ========== */
	--face-faint: var(--neutral-100); /* Light bg/borders */
	--face-light: var(--neutral-400); /* Base surfaces */
	--face-soft: var(--neutral-500); /* Cards / panels */
	--face-deep: var(--neutral-900); /* Dark surfaces */

	/* ========== Textcolor ========== */
	--text-muted: var(--neutral-50); /* Labels and extra light */
	--text-caption: var(--neutral-200); /* Small text */
	--text-disabled: var(--neutral-300); /* Disabled text */
	--text-soft: var(--neutral-600); /* Secondary text */
	--text-body: var(--neutral-700); /* Main body text */
	--text-heading: var(--neutral-800); /* Headings */
	--text-display: var(--neutral-950); /* Display titles */

	/* ========== Textsize ========== */
	--type-label: var(--font-size-xs); /* Labels, captions, metadata */
	--type-small: var(--font-size-sm); /* small UI text, dense body, nav */
	--type-body: var(--font-size-md); /* Main body text */
	--type-lead: var(--font-size-lg); /* Lead paragraph, intro */
	--type-heading: var(--font-size-xl); /* Section subtitle */
	--type-display: var(--font-size-ex); /* Main heading */
}
:root {
	/* Font family */
	--font-family-base: 'Manrope', sans-serif;
	--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/* Font weights */
	--font-weight-bold: 700;
	--font-weight-semibold: 600;
	--font-weight-medium: 500;
	--font-weight-regular: 400;

	/* Display */
	--font-display: var(--font-weight-bold) var(--font-size-dp) / var(--line-tight) var(--font-family-base); /* 64px */

	/* Headings */
	--font-headline-1: var(--font-weight-bold) var(--font-size-pt) / var(--line-snug) var(--font-family-base); /* 48px */
	--font-headline-2: var(--font-weight-bold) var(--font-size-ex) / var(--line-snug) var(--font-family-base); /* 36px */
	--font-headline-3: var(--font-weight-semibold) var(--font-size-xl) / var(--line-snug) var(--font-family-base); /* 28px */
	--font-headline-4: var(--font-weight-semibold) var(--font-size-lg) / var(--line-normal) var(--font-family-base); /* 21px */
	--font-headline-5: var(--font-weight-medium) var(--font-size-md) / var(--line-normal) var(--font-family-base); /* 16px */

	/* Body */
	--font-body: var(--font-weight-regular) var(--font-size-md) / var(--line-normal) var(--font-family-base); /* 16px */
	--font-body-strong: var(--font-weight-semibold) var(--font-size-md) / var(--line-normal) var(--font-family-base); /* 16px */
	--font-body-lead: var(--font-weight-regular) var(--font-size-lg) / var(--line-relaxed) var(--font-family-base); /* 21px */

	/* UI */
	--font-ui-sm: var(--font-weight-medium) var(--font-size-sm) / var(--line-snug) var(--font-family-base); /* 12px */
	--font-button: var(--font-weight-bold) var(--font-size-md) / var(--line-tight) var(--font-family-base); /* 16px */

	/* Utilities */
	--font-code: var(--font-weight-regular) var(--font-size-sm) / var(--line-relaxed) var(--font-family-mono); /* 12px */
	--font-meta: var(--font-weight-medium) var(--font-size-sm) / var(--line-normal) var(--font-family-base); /* 12px */
	--font-caption: var(--font-weight-regular) var(--font-size-sm) / var(--line-normal) var(--font-family-base); /* 12px */
	--font-overline: var(--font-weight-semibold) var(--font-size-sm) / var(--line-tight) var(--font-family-base); /* 12px */
}