@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..700;1,9..40,400..700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    color-scheme: dark;
    --color-scheme: dark;
    --ink-rgb: 255, 255, 255;
    --shade-rgb: 0, 0, 0;
    --warning: #eac28b;
    --bg-r: 17;
    --bg-g: 20;
    --bg-b: 24;
    --page-bg: #111418;
    --surface: #191e24;
    --surface-raised: #222931;
    --panel-bg: rgba(25, 30, 36, .96);
    --menu-bg: #20262d;
    --header-bg: rgba(17, 20, 24, .92);
    --panel-border: rgba(255, 255, 255, 0.10);
    --panel-shadow: 0 16px 40px rgba(0, 0, 0, .36);
    --text-color: #edf1f5;
    --text-muted: #a1abb6;
    --input-bg: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.12);
    --accent: #88c9be;
    --accent-hover: #ade0d6;
    --accent-soft: rgba(136, 201, 190, .14);
    --button-bg: #246e64;
    --button-hover: #1d5c54;
    --button-text: #ffffff;
    --hover-bg: rgba(255, 255, 255, .06);
    --danger: #f49292;
    --backdrop: rgba(0, 0, 0, .65);
    --focus-ring: #88c9be;
    --brand-teal: #118277;
    --brand-pine: #0A2F33;
    --success: #30D158;
    --motion-duration: 180ms;
    --motion-ease: cubic-bezier(.2, .7, .2, 1);
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

:root[data-theme='light'] {
    color-scheme: light;
    --color-scheme: light;
    --ink-rgb: 25, 36, 46;
    --shade-rgb: 255, 255, 255;
    --warning: #87561c;
    --bg-r: 243;
    --bg-g: 245;
    --bg-b: 247;
    --page-bg: #f3f5f7;
    --surface: #ffffff;
    --surface-raised: #eef1f4;
    --panel-bg: rgba(255, 255, 255, .97);
    --menu-bg: #ffffff;
    --header-bg: rgba(243, 245, 247, .94);
    --panel-border: rgba(25, 36, 46, .12);
    --panel-shadow: 0 16px 40px rgba(25, 36, 46, .10);
    --text-color: #202a34;
    --text-muted: #586675;
    --input-bg: #f0f3f5;
    --border-color: rgba(25, 36, 46, .16);
    --accent: #216b60;
    --accent-hover: #17584e;
    --accent-soft: rgba(33, 107, 96, .10);
    --button-bg: #246e64;
    --button-hover: #1d5c54;
    --button-text: #ffffff;
    --hover-bg: rgba(25, 36, 46, .05);
    --danger: #b53737;
    --backdrop: rgba(25, 36, 46, .24);
    --focus-ring: #216b60;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    background: var(--page-bg);
    color: var(--text-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
}