:root {
    --gray-900: #e3e3e3;
    --gray-800: #d3d3d3;
    --gray-700: #b5b5b5;
    --gray-600: #a5a5a5;
    --gray-500: #959595;
    --gray-400: #757575;
    --gray-300: #5f5f5f;
    --gray-200: #3b3b3b;
    --gray-100: #2a2a2a;
    --gray-50: #1f1f1f;
    --white: #1a1a1a;

    --note-yellow: #b8860b;
    --note-orange: #d4820f;
    --note-pink: #d15b52;
    --note-purple: #9b6bc7;
    --note-blue: #6a9cd9;
    --note-green: #8db841;

    --note-yellow-border: #9a6f09;
    --note-orange-border: #b36a0c;
    --note-pink-border: #b04a42;
    --note-purple-border: #8357a6;
    --note-blue-border: #5782b8;
    --note-green-border: #729935;

    /* play/active accent is note-orange */
    --accent-blue: var(--note-orange);
    --accent-blue-hover: #e0922a;
    --accent-blue-dark: var(--note-orange-border);
    --accent-green: #10b981;
    --accent-green-dark: #059669;
    --accent-orange: #f59e0b;
    --accent-orange-dark: #d97706;
    --accent-red: #ef4444;

    --font-main: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;

    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);

    --transition: all 0.2s ease;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

html, body {
    box-sizing: border-box;
    color-scheme: dark;
}

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