:root {
    --font-ui: 'Inter', 'Segoe UI', Arial, sans-serif;
    --font-brand: var(--font-ui);

    --font-size-label: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-compact: 13px;
    --font-size-base: 14px;
    --font-size-md: 16px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-giant: 28px;
    --icon-size-dot: 6px;
    --icon-size-xs: 8px;
    --icon-size-inline: 14px;
    --icon-size-control: 16px;
    --icon-size-flag-width: 20px;
    --icon-size-flag-height: 14px;

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-heading: 1.3;
    --line-height-body: 1.5;
    --line-height-reading: 1.65;

    --tracking-normal: 0;
    --tracking-label: 0.06em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --control-height-sm: 32px;
    --control-height-md: 38px;
    --control-height-touch: 44px;

    --radius-card: 6px;
    --radius-control: 5px;
    --radius-indicator: 2px;
    --radius-pill: 999px;

    --color-primary: var(--accent-blue, #2f6df6);
    --color-success: var(--accent-green, #059669);
    --color-warning: var(--accent-orange, #ea580c);
    --color-danger: var(--accent-red, #dc2626);
    --color-info: var(--accent-blue, #2f6df6);

    --motion-fast: 160ms;
    --motion-standard: 200ms;
    --focus-outline: 2px solid var(--color-primary);
    --focus-outline-offset: 2px;
    --focus-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent);

    --z-sticky: 100;
    --z-popover: 1000;
    --z-drawer: 1500;
    --z-toast: 1700;
    --z-dialog-secondary: 1900;
    --z-dialog: 2000;
    --z-modal: 10000;
    --z-modal-elevated: 10020;
    --z-notification: 10100;

    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 10px 28px rgba(15, 23, 42, 0.12);
    --shadow-lg: 0 24px 70px rgba(15, 23, 42, 0.16);
}

html {
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

body,
button,
input,
select,
textarea {
    font-family: var(--font-ui);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-ui);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    text-wrap: balance;
}

h1 { font-size: var(--font-size-giant); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

.tabular-nums,
time,
input[type='date'],
input[type='number'] {
    font-variant-numeric: tabular-nums;
}