/* Light theme, "nacre": pearl-white surfaces on a lilac mist, Tahitian-pearl
   ink, one lagoon blue for everything clickable, and the pool's green as jade.
   Text colors read at 4.5:1 or better on the surfaces they sit on, icon
   colors at 3:1. Each hex appears once; the other tokens point at it. */
:root[data-theme='light'] {
    /* Page and text */
    --background-color: #edebf2;
    --primary-text-color: #21212f;
    --hover-text-color: #12111c;
    /* Strongest ink: dark mode's white, used for inputs and hovered rows */
    --secondary-text-color: #636372;
    --border-color: #dad7e1;
    --border-color-hover: #c3c1cd;

    /* Accent and status */
    --accent: #2060b9;
    --accent-text: var(--accent);
    --stat-blue: var(--accent);
    --green: #0b7552;
    --stat-green: var(--green);
    --success: var(--green);
    --success-text: var(--green);
    --red: #b23142;
    --blue: var(--accent);
    --yellow: #ae7c02;
    --orange: #b14c00;
    --pink: var(--accent-pink);
    --stat-pink: var(--accent-pink);
    --hint-text-color: #935a0f;
    --attention-text-color: var(--hint-text-color);
    --nav-bar-background: var(--accent);
    --toggle-off-background: var(--border-color-hover);

    /* Surfaces */
    --segment-background: #f9f8fc;
    --menu-background-color: var(--segment-background);
    --menu-hover-background: #e9e6ef;
    --active-tab-background: var(--background-color);
    /* Dark mode's Solana gradient, its pale blue-to-green stops darkened (same
       hues) so the band shows on a light menu */
    --menu-active-underline: linear-gradient(90deg, #9945ff 0%, #8752f3 30%, #488bc8 50%, #1696ac 60%, #189c80 72%, #0f9f61 97%);
    --table-background: var(--segment-background);
    --table-header-background: #f3f2f7;
    --table-hover-background: var(--menu-hover-background);
    /* Sky blue: reads as blue, unlike the lilac hover */
    --pending-row-background: color-mix(in srgb, #2caffe 10%, transparent);
    --modal-background: var(--segment-background);
    --modal-header-background: var(--table-header-background);
    --modal-content-background: var(--segment-background);
    --dropdown-background: var(--segment-background);
    --dropdown-menu-background: var(--segment-background);
    --dropdown-hover-background: var(--menu-hover-background);
    --dropdown-item-hover-text-color: var(--hover-text-color);
    /* Popups as Semantic's: white, framed and shadowed */
    --popup-background: #fff;
    --popup-text-color: rgba(0, 0, 0, 0.87);
    --popup-border: 1px solid #d4d4d5;
    --popup-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15);
    /* The darker fold under a ribbon label */
    --ribbon-fold: color-mix(in srgb, var(--green) 70%, black);

    /* Forms and buttons */
    --input-background: var(--segment-background);
    --input-border: var(--border-color-hover);
    --input-focus-border: var(--accent);
    --button-background: #e3e0ea;
    --button-hover-background: #d8d5df;
    --button-positive-backgroud: var(--green);
    --button-positive-backgroud-hover: color-mix(in srgb, var(--green) 82%, black);

    /* Statistics and summary cards */
    --stat-background: var(--segment-background);
    --custom-stat-bg: var(--stat-background);
    --stat-value-color: var(--primary-text-color);
    --stat-label-color: var(--secondary-text-color);
    /* One accent per card, all at about the same lightness so none shouts */
    --accent-blue: #3568ad;
    --accent-green: var(--green);
    --accent-gold: #93661a;
    --accent-pink: #ad4f78;
    --accent-purple: #7c5bb0;
    --accent-cyan: #217984;
    --summary-card-shadow: inset 0 0 0 1px var(--border-color), 0 1px 3px rgba(33, 33, 47, 0.06);
    --summary-card-hover-shadow: inset 0 0 0 1px var(--border-color-hover), 0 2px 6px rgba(33, 33, 47, 0.08);
    --summary-card-shadow-phone: var(--summary-card-shadow);

    /* Messages and effort; the saved/failed messages keep Semantic's pale fills */
    --success-message-text-color: var(--green);
    --success-message-background: #fcfff5;
    --error-message-text-color: #9f3a38;
    --error-message-background: #fff6f6;
    --effort-normal-color: var(--green);
    --effort-high-color: var(--accent-gold);
    --effort-critical-color: var(--red);

    /* Region badges keep their dark-theme hue, in a shade that reads on white;
       an unknown region gets the secondary text color */
    --region-unknown: var(--secondary-text-color);
    --region-eu: #027794;
    --region-ru: #66376d;
    --region-us: #375992;
    --region-au: #006a68;
    --region-pl: #3d6bc5;
    --region-br: #6f4dae;
    --region-ca: #005545;
    --region-sg: #00806a;
    --region-id: #9a4594;
    --region-hk: #823283;
    --region-tr: #814903;
    --region-jp: #ab383d;
    --region-in: #056f3e;

    /* Benchmarks: the theme's own colors, architecture text deepened with
       15% ink as it sits on a tint of itself */
    --bench-blackwell: color-mix(in srgb, var(--accent-purple) 85%, var(--primary-text-color));
    --bench-hopper: color-mix(in srgb, var(--accent-cyan) 85%, var(--primary-text-color));
    --bench-ada: color-mix(in srgb, var(--orange) 85%, var(--primary-text-color));
    --bench-ampere: color-mix(in srgb, var(--green) 85%, var(--primary-text-color));
    --bench-arch-other: var(--secondary-text-color);
    --bench-effic-1: var(--green);
    --bench-effic-2: var(--accent-gold);
    --bench-effic-3: var(--orange);
    --bench-effic-4: var(--red);
    --bench-hashrate: var(--accent);
    --bench-note: var(--attention-text-color);

    /* Charts: read from JavaScript, so plain colors only (no color-mix) */
    --chart-background: var(--segment-background);
    --chart-text-color: var(--secondary-text-color);
    --chart-subtitle-color: var(--primary-text-color);
    --chart-note-color: #666;
    --chart-gridline-color: var(--border-color);
    --chart-axis-line-color: var(--border-color);
    --chart-line-color: var(--accent);
    --chart-bar-color: var(--accent);
    --chart-area-fill-start: rgba(32, 96, 185, 0.22);
    --chart-area-fill-end: rgba(32, 96, 185, 0.02);
    --chart-tooltip-background: var(--segment-background);
    --chart-tooltip-border: var(--border-color-hover);
}