:root {
    --bg: #07080a;
    --bg-raise: #0c0e11;
    --bg-input: #10131a;
    --line: #1d2229;
    --line-mid: #2a3038;
    --line-ui: #4a525c;
    --text: #e8eae6;
    --text-dim: #9ba3ab;
    --text-faint: #7b848e;
    --accent: #9ba3ab;
    --accent-bright: #e8eae6;
    --accent-wash: color-mix(in srgb, var(--accent) 8%, transparent);
    --ok: #8fc98b;
    --ok-border: #37522f;
    --danger: #e28e6c;
    --danger-border: #5c3728;
    --focus: #7b848e;

    --border: var(--line-mid);
    --muted: var(--text-faint);
    --panel-bg: var(--bg-raise);
    --surface: var(--bg-input);
    --success: var(--ok);

    --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, sans-serif;

    --text-2xs: 10px;
    --text-xs: 11px;
    --text-meta: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-title: 15px;
    --text-md: 16px;
    --text-lg: 20px;
    --text-xl: 26px;
    --text-2xl: 34px;

    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 24px;
    --sp-6: 32px;
    --sp-7: 48px;
    --sp-8: 72px;

    --layout-small: 560px;
    --layout-medium: 720px;
    --layout-large: 780px;
    --layout-extra-large: 920px;

    --transition-fast: 0.2s;

    --hatch: repeating-linear-gradient(
        135deg,
        rgba(232, 234, 230, 0.045) 0,
        rgba(232, 234, 230, 0.045) 1px,
        transparent 1px,
        transparent 5px
    );
    --grid-dots: radial-gradient(rgba(232, 234, 230, 0.05) 1px, transparent 1.4px);
}