:root,
.force-dark {
    /* Palette */
    --white: #ffffff;
    --black: #000000;

    --green-100: #d1fae5;
    --green-400: #34d399;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #047857;
    --green-800: #065f46;
    --red-100: #fee2e2;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --red-800: #991b1b;
    --crimson-600: #bf1d3a;
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --amber-500: #f59e0b;
    --amber-700: #b45309;
    --purple-600: #9333ea;
    --purple-700: #7e22ce;
    --gray-300: #dddddd;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --ink-400: #5e6773;
    --gray-600: #4b5563;
    --paper-100: #f4f6f8;
    --line-300: #d0d7de;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --market-up: #0ecb81;
    --market-down: #f6465d;
    --red-alert: #ff4d4f;
    --red-alert-alt: #ff4d4d;
    --red-alert-light: #ff8a8a;
    --brand-coingecko: #8cc63f;
    --brand-tradingview: #2962ff;

    /* RGB channels for transparent variants of the colors above */
    --white-rgb: 255, 255, 255;
    --black-rgb: 0, 0, 0;
    --ink-rgb: 15, 23, 42;
    --slate-rgb: 148, 163, 184;
    --paper-100-rgb: 244, 246, 248;
    --green-rgb: 16, 185, 129;
    --red-rgb: 239, 68, 68;
    --blue-rgb: 59, 130, 246;
    --amber-rgb: 245, 158, 11;
    --market-up-rgb: 14, 203, 129;
    --market-down-rgb: 246, 70, 93;
    --bg-chart-rgb: 11, 15, 18;
    --bg-dark-rgb: 21, 26, 30;
    --bg-card-rgb: 30, 37, 42;
    --bg-deep-rgb: 17, 20, 24;
    --text-dim-rgb: 132, 142, 156;
    --red-alert-rgb: 255, 77, 79;
    --red-alert-alt-rgb: 255, 77, 77;
    --brand-coingecko-rgb: 140, 198, 63;
    --brand-tradingview-rgb: 41, 98, 255;
    --tint-rgb: var(--white-rgb);
    --shade-rgb: var(--black-rgb);

    /* Surfaces */
    --bg-dark: #151a1e;
    --pwa-bg: var(--bg-dark);
    --bg-card: #1e252a;
    --bg-darker: #0b0e11;
    --bg-inset: #0d1117;
    --bg-chart: #0b0f12;
    --bg-dropdown: #1e2329;
    --input-bg: var(--gray-900);
    --input-bg-strong: var(--black);
    --bg-glass: rgba(var(--bg-dark-rgb), 0.90);
    --border: #2b3139;
    --hover-bg: rgba(var(--tint-rgb), 0.05);

    /* Text */
    --text-main: var(--white);
    --text-dim: #848e9c;
    --text-soft: #eaecef;
    --text-subtle: var(--gray-400);
    --text-faint: var(--gray-500);
    --text-strong: var(--slate-100);
    --text-body: var(--slate-200);
    --text-secondary: var(--slate-400);
    --text-on-accent: var(--black);
    --alert-success-text: var(--green-100);
    --alert-danger-text: var(--red-100);

    /* Accents */
    --accent-green: var(--green-500);
    --accent-green-hover: var(--green-400);
    --accent-green-deep: var(--green-600);
    --accent-blue: var(--blue-500);
    --accent-orange: var(--amber-500);
    --accent-red: var(--red-500);
    --accent-purple: var(--purple-600);
    --success: var(--accent-green);
    --danger: var(--market-down);

    /* Shape & depth */
    --radius: 12px;
    --shadow-card: 0 4px 20px rgba(var(--black-rgb), 0.1);
}

:root[data-theme="light"] {
    --bg-dark: var(--paper-100);
    --bg-dark-rgb: var(--paper-100-rgb);
    --bg-card: var(--white);
    --bg-card-rgb: var(--white-rgb);
    --bg-deep-rgb: var(--white-rgb);
    --bg-darker: var(--white);
    --bg-inset: var(--paper-100);
    --bg-dropdown: var(--white);
    --input-bg: var(--white);
    --input-bg-strong: var(--paper-100);
    --border: var(--line-300);
    --tint-rgb: var(--ink-rgb);
    --shade-rgb: var(--slate-rgb);

    --text-main: var(--gray-900);
    --text-dim: var(--gray-600);
    --text-soft: var(--gray-800);
    --text-subtle: var(--ink-400);
    --text-faint: var(--ink-400);
    --text-strong: var(--gray-900);
    --text-body: var(--gray-800);
    --text-secondary: var(--slate-600);
    --text-on-accent: var(--white);
    --alert-success-text: var(--green-800);
    --alert-danger-text: var(--red-800);

    --accent-green: var(--green-700);
    --accent-green-hover: var(--green-800);
    --accent-green-deep: var(--green-800);
    --accent-blue: var(--blue-700);
    --accent-orange: var(--amber-700);
    --accent-red: var(--red-700);
    --accent-purple: var(--purple-700);
    --market-up: var(--green-700);
    --market-down: var(--crimson-600);
    --red-alert: var(--crimson-600);
    --red-alert-alt: var(--crimson-600);
    --red-alert-light: var(--red-700);
}

.force-dark {
    color: var(--text-main);
}

/* Cross-market report */
.cross-market-report {
    --report-bg: #f5f5f5;
    --report-card: #ffffff;
    --report-border: #dddddd;
    --report-head: #2c3e50;
    --report-zebra: #f9f9f9;
    --report-accent: #3498db;
    --report-muted: #7f8c8d;
    --report-strong: #27ae60;
    --report-weak: #c0392b;
    --report-ticker: #10b981;
    --report-guide: #ecf0f1;
}