* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --accent: #ff7002;
    --accent-dark: #d95700;
    --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-2: #fafafa;
    --surface-3: #f1f3f5;
    --text: #171717;
    --muted: #74777d;
    --muted-2: #a0a3a8;
    --border: #e5e7eb;
    --sidebar: #090909;
    --sidebar-hover: #1b1b1b;
    --green: #16a34a;
    --green-soft: #eaf8ef;
    --yellow: #ca8a04;
    --yellow-soft: #fff8dd;
    --red: #dc2626;
    --red-soft: #feecec;
    --blue: #2563eb;
    --blue-soft: #eaf1ff;
    --purple: #7c3aed;
    --purple-soft: #f0eaff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
    --shadow-md: 0 12px 34px rgba(0, 0, 0, .10);
    --radius: 12px;
    --bg-dark: #111315;
    --surface-dark: #181b1f;
    --surface-3-dark: #24282e;
    --text-dark: #f5f7fa;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111315;
    --surface: #181b1f;
    --surface-2: #1d2126;
    --surface-3: #24282e;
    --text: #f5f7fa;
    --muted: #a4a9b1;
    --muted-2: #7d838d;
    --border: #2d3239;
    --sidebar: #070809;
    --sidebar-hover: #202328;
    --green-soft: rgba(22, 163, 74, .14);
    --yellow-soft: rgba(202, 138, 4, .15);
    --red-soft: rgba(220, 38, 38, .14);
    --blue-soft: rgba(37, 99, 235, .16);
    --purple-soft: rgba(124, 58, 237, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .2);
    --shadow-md: 0 16px 40px rgba(0, 0, 0, .35);
}