/* Dark theme, for <html data-theme="dark">: graphite surfaces, light-gray ink
   and bright accents. Each hex appears once; the other tokens point at it.
   light.css defines the same tokens in the same order. */
:root[data-theme='dark'] {
    /* Page and text */
    --background-color: #20232a;
    --primary-text-color: #d2d2d2;
    --hover-text-color: #ffffff;
    --secondary-text-color: #b0b0b0;
    --border-color: #3a3f45;
    --border-color-hover: #4a4f57;

    /* Accent and status */
    --accent: #1677ff;
    --accent-text: #4096ff;
    --stat-blue: #007bff;
    --green: #21ba45;
    --stat-green: #28a745;
    --success: #52c41a;
    --success-text: #73d13d;
    --red: #db2828;
    --blue: #2185d0;
    --yellow: #fbbd08;
    --orange: #f2711c;
    --pink: #e03997;
    --stat-pink: var(--pink);
    --hint-text-color: #f2c037;
    --attention-text-color: #f39c12;
    --nav-bar-background: #4169e1;
    --toggle-off-background: #555;

    /* Surfaces */
    --segment-background: #2b2f36;
    --menu-background-color: var(--segment-background);
    --menu-hover-background: var(--border-color);
    --active-tab-background: #3f434c;
    /* Under the active menu item: Solana's purple-to-green gradient */
    --menu-active-underline: linear-gradient(90deg, #9945ff 0%, #8752f3 30%, #5497d5 50%, #43b4ca 60%, #28e0b9 72%, #19fb9b 97%);
    --table-background: var(--segment-background);
    --table-header-background: #333842;
    --table-hover-background: var(--border-color);
    /* Sky-blue tint for pending rows, deep enough that the blue hash links
       keep their contrast */
    --pending-row-background: color-mix(in srgb, #0284c7 14%, transparent);
    --modal-background: var(--segment-background);
    --modal-header-background: var(--table-header-background);
    --modal-content-background: var(--segment-background);
    --dropdown-background: var(--table-header-background);
    --dropdown-menu-background: var(--segment-background);
    --dropdown-hover-background: var(--border-color);
    --dropdown-item-hover-text-color: #e5e5e5;
    /* Popups as Semantic's inverted ones: near-black, white text, no frame */
    --popup-background: #1b1c1d;
    --popup-text-color: var(--on-accent);
    --popup-border: none;
    --popup-shadow: none;
    /* The darker fold under a ribbon label, Semantic's shade of its green */
    --ribbon-fold: #198f35;

    /* Forms and buttons */
    --input-background: var(--table-header-background);
    --input-border: var(--border-color);
    --input-focus-border: #1677ffdd;
    --button-background: var(--border-color);
    --button-hover-background: var(--border-color-hover);
    --button-positive-backgroud: var(--green);
    --button-positive-backgroud-hover: #21ba45aa;

    /* Statistics and summary cards */
    --stat-background: var(--segment-background);
    --custom-stat-bg: rgba(80, 80, 80, 0.28);
    --stat-value-color: #d3d3d3;
    --stat-label-color: var(--dropdown-item-hover-text-color);
    /* One accent per card; each reads at 4.5:1 or better on the card */
    --accent-blue: var(--accent-text);
    --accent-green: var(--success);
    --accent-gold: #faad14;
    --accent-pink: #f759ab;
    --accent-purple: #b37feb;
    --accent-cyan: #36cfc9;
    --summary-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --summary-card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --summary-card-shadow-phone: 0 1px 4px rgba(0, 0, 0, 0.15);

    /* Messages and effort; the saved/failed messages have no fill */
    --success-message-text-color: lawngreen;
    --success-message-background: transparent;
    --error-message-text-color: #f5222d;
    --error-message-background: transparent;
    --effort-normal-color: var(--stat-green);
    --effort-high-color: #ffa500;
    --effort-critical-color: #ff6b6b;

    /* Region badges; an unknown region gets slate */
    --region-unknown: #94a3b8;
    --region-eu: #00afd8;
    --region-ru: #f8c1ff;
    --region-us: #98bfff;
    --region-au: #00d5d2;
    --region-pl: #5e94ff;
    --region-br: #b694ff;
    --region-ca: #6affdc;
    --region-sg: #00aa8e;
    --region-id: #e068d8;
    --region-hk: #ff91fe;
    --region-tr: #ffab5c;
    --region-jp: #ff7a7a;
    --region-in: #58d68d;

    /* Benchmarks: each architecture's badge and group, the efficiency tiers
       from best to worst, the hashrate and the power note */
    --bench-blackwell: #a78bfa;
    --bench-hopper: #22d3ee;
    --bench-ada: #fb923c;
    --bench-ampere: #34d399;
    --bench-arch-other: #9ca3af;
    --bench-effic-1: var(--bench-ampere);
    --bench-effic-2: #fbbf24;
    --bench-effic-3: var(--bench-ada);
    --bench-effic-4: #f87171;
    --bench-hashrate: #60a5fa;
    --bench-note: #f59e0b;

    /* Charts: read from JavaScript, so plain colors only (no color-mix) */
    --chart-background: var(--segment-background);
    --chart-text-color: var(--dropdown-item-hover-text-color);
    --chart-subtitle-color: var(--stat-value-color);
    --chart-note-color: #aaa;
    --chart-gridline-color: #444;
    --chart-axis-line-color: var(--chart-gridline-color);
    --chart-line-color: #1890ff;
    --chart-bar-color: #2caffe;
    --chart-area-fill-start: rgba(24, 144, 255, 0.4);
    --chart-area-fill-end: rgba(24, 144, 255, 0.05);
    --chart-tooltip-background: var(--chart-gridline-color);
    --chart-tooltip-border: #666;
}