:root {
    --charcoal-50:  #F7F6F5;
    --charcoal-100: #E8E6E4;
    --charcoal-200: #D4D1CE;
    --charcoal-300: #A9A5A0;
    --charcoal-400: #7A7570;
    --charcoal-500: #5C5752;
    --charcoal-600: #454240;
    --charcoal-700: #3A3632;
    --charcoal-800: #2C2825;
    --charcoal-900: #1E1B19;
    --terracotta-50:  #FEF4EF;
    --terracotta-100: #FBE4D6;
    --terracotta-200: #F6C8AC;
    --terracotta-300: #EFA67D;
    --terracotta-400: #E58855;
    --terracotta-500: #D96B3B;
    --terracotta-600: #C85A32;
    --terracotta-700: #A64822;
    --terracotta-800: #82371A;
    --terracotta-900: #5F2813;
    --cream-50:  #FCFAF6;
    --cream-100: #F7F6F2;
    --cream-200: #F2EFE7;
    --cream-300: #E8E6E1;
    --cream-400: #E3DCC8;
    --cream-500: #D8D1BC;
    --beige-300: #DFD2B0;
    --beige-400: #D6C5A0;
    --beige-500: #C8B68C;
    --forest-50:  #F0F7F4;
    --forest-100: #D9EBE2;
    --forest-200: #B5D8C7;
    --forest-300: #85BEA5;
    --forest-400: #5AA382;
    --forest-500: #3D8B68;
    --forest-600: #2F7054;
    --forest-700: #275A45;
    --forest-800: #224939;
    --forest-900: #1D3D30;
    --peach-50:  #FEF6F4;
    --peach-100: #FDEDE9;
    --peach-200: #FBDAD3;
    --peach-300: #F5BDB0;
    --peach-400: #EDAA99;
    --peach-500: #E08F7A;
    --peach-600: #D4735B;
    --peach-700: #B85A44;
    --peach-800: #9A4A39;
    --peach-900: #7D3E31;
    --error-50:  #FEF2F2;
    --error-100: #FEE2E2;
    --error-200: #FECACA;
    --error-300: #FCA5A5;
    --error-400: #F87171;
    --error-500: #EF4444;
    --error-600: #DC2626;
    --error-700: #B91C1C;
    --error-800: #991B1B;
    --error-900: #7F1D1D;
    --teal-50:  #F0FAF8;
    --teal-100: #D9F2EE;
    --teal-200: #B5E5DE;
    --teal-300: #8FD4CA;
    --teal-400: #6EC4B8;
    --teal-500: #4EB3A5;
    --teal-600: #3D9A8E;
    --teal-700: #327D74;
    --teal-800: #2A665F;
    --teal-900: #23534E;
    --color-bg: var(--cream-200);
    --color-surface: #FEFCF9;
    --color-surface-elevated: var(--cream-50);
    --color-surface-inset: var(--cream-200);
    --color-surface-dark: var(--charcoal-800);
    --color-surface-dark-gradient: var(--charcoal-700);
    --color-sidebar: var(--charcoal-800);
    --color-sidebar-hover: var(--beige-400);
    --color-sidebar-active-bg: var(--beige-400);
    --color-sidebar-text: var(--cream-50);
    --color-sidebar-text-muted: rgba(247, 246, 242, 0.64);
    --color-sidebar-accent: var(--terracotta-600);
    --color-text: var(--charcoal-800);
    --color-text-secondary: var(--charcoal-400);
    --color-text-muted: var(--charcoal-300);
    --color-text-on-dark: var(--cream-100);
    --color-text-on-dark-secondary: var(--charcoal-300);
    --color-accent: var(--terracotta-600);
    --color-accent-hover: var(--terracotta-700);
    --color-accent-subtle: var(--terracotta-50);
    --color-accent-text: var(--terracotta-700);
    --color-accent-icon: var(--terracotta-600);
    --color-accent-glow: rgba(200, 90, 50, 0.1);
    --color-accent-icon-bg: rgba(200, 90, 50, 0.15);
    --pixel-bar-fill: var(--color-accent);
    --pixel-bar-progress: var(--beige-400);
    --pixel-bar-empty: var(--cream-300);
    --color-success: var(--forest-600);
    --color-success-subtle: var(--forest-50);
    --color-success-text: var(--forest-700);
    --color-warning: var(--peach-600);
    --color-warning-subtle: var(--peach-50);
    --color-warning-text: var(--peach-700);
    --color-error: var(--error-600);
    --color-error-subtle: var(--error-50);
    --color-error-text: var(--error-700);
    --color-info: var(--teal-600);
    --color-info-subtle: var(--teal-50);
    --color-info-text: var(--teal-700);
    --color-border: var(--cream-400);
    --color-border-subtle: var(--cream-300);
    --color-border-strong: var(--charcoal-300);
    --color-focus: var(--charcoal-700);
    --font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    --text-eyebrow: 0.6875rem;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --leading-tight: 1.2;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-eyebrow: 0.08em;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-3xl: 2rem;
    --radius-full: 9999px;
    --shadow-sm: 0 2px 8px rgba(44, 40, 37, 0.06);
    --shadow-md: 0 4px 12px rgba(44, 40, 37, 0.08);
    --shadow-lg: 0 8px 24px rgba(44, 40, 37, 0.10);
    --shadow-xl: 0 16px 48px rgba(44, 40, 37, 0.12);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms var(--ease-out-quart);
    --transition-base: 200ms var(--ease-out-quart);
    --transition-slow: 300ms var(--ease-out-quart);
    --content-max-width: 1200px;
    --content-narrow: 800px;
    --sidebar-width: 240px;
    --sidebar-collapsed: 72px;
}
@supports (color: color-mix(in srgb, red, red)) {
    :root {
        --color-sidebar: color-mix(in srgb, var(--charcoal-800) 60%, var(--charcoal-700));
    }
}