:root {
    --accent: #8b5cf6;
    --accent-strong: #7c3aed;
    --on-accent: #ffffff;
    --font: system-ui, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --card-gap: 16px;
    --page-max: 1600px;
    --page-pad: 48px;
    --page-narrow: 760px;
    --transition: .15s ease;
    --success-soft: color-mix(in srgb, var(--success) 14%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 14%, transparent);
    --warning-soft: color-mix(in srgb, var(--warning) 16%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 30%, transparent);
    --ring: color-mix(in srgb, var(--accent) 26%, transparent);
}

:root,
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0b0b0e;
    --bg-2: #0e0e12;
    --surface: #141418;
    --surface-2: #1a1a20;
    --surface-3: #222229;
    --text: #e8e8ec;
    --text-sub: #9595a1;
    --text-faint: #8a8a96;
    --link: #a98bf8;
    --border: #26262d;
    --border-strong: #33333c;
    --success: #3fbf8f;
    --danger: #ec6a6a;
    --warning: #d8a64a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-md: 0 2px 10px rgba(0, 0, 0, .32);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .48);
    --accent-hover: color-mix(in srgb, var(--accent-strong), #ffffff 10%);
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #f3f4f6;
    --bg-2: #edeef1;
    --surface: #fafbfc;
    --surface-2: #f1f2f4;
    --surface-3: #e9eaed;
    --text: #2c2f37;
    --text-sub: #565961;
    --text-faint: #63666e;
    --link: #6d3fd4;
    --border: #e7e9ed;
    --border-strong: #d7dadf;
    --success: #0d6b44;
    --danger: #c0342d;
    --warning: #8a6100;
    --shadow-sm: 0 1px 2px rgba(17, 24, 39, .04);
    --shadow-md: 0 1px 3px rgba(17, 24, 39, .06);
    --shadow-lg: 0 12px 30px rgba(17, 24, 39, .10);
    --accent-hover: color-mix(in srgb, var(--accent-strong), #000000 10%);
    --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
    --success-soft: color-mix(in srgb, var(--success) 10%, transparent);
    --danger-soft: color-mix(in srgb, var(--danger) 10%, transparent);
    --warning-soft: color-mix(in srgb, var(--warning) 10%, transparent);
}

@media (max-width: 860px) {
    :root { --page-pad: 18px; }
}