/* =====================================================================
   Light theme — activated when documentElement carries
   data-theme="light". Overrides every token defined in base.css's
   :root block. Layout / sizing tokens (`--player-height` etc.) are
   intentionally untouched.

   The accent stays orange (matches Auditura's brand) but gets a
   slightly darker hue so it reads correctly on white surfaces and
   doesn't fail WCAG contrast against light text-on-accent.
   ===================================================================== */
:root[data-theme="light"] {
    /* Surfaces — paper-on-paper layering, not pure white. The 4-step
       difference between app/sidebar/card/elevated reads as depth
       without shadow tricks. */
    --surface-app:          #f5f5f7;
    --surface-app-rgb:      245, 245, 247;
    --surface-sidebar:      #ebebef;
    --surface-card:         #ffffff;
    --surface-card-hover:   #f0f0f4;
    --surface-elevated:     #ffffff;
    --surface-overlay:      rgba(20, 20, 30, 0.45);
    --surface-player:       #ebebef;

    /* Text — dark on light, with the same primary/secondary/muted
       hierarchy the dark theme has. */
    --text-primary:         #1a1a25;
    --text-secondary:       #5a5a68;
    --text-muted:           #8a8a98;
    --text-on-accent:       #ffffff;

    /* Borders — light grey, more visible than the dark theme's hairline
       so cards and rows feel grouped without shadow. */
    --border-subtle:        #d8d8e0;
    --border-strong:        #b8b8c4;
    --border-focus:         #d65a25;

    /* Accents — same hues as dark, slightly darker primary so
       text-on-white reads at full contrast. */
    --accent-primary:       #d65a25;
    --accent-secondary:     var(--accent-primary);
    --accent-purple:        #8347d0;
    --accent-cyan:          #00b8a8;
    --accent-primary-rgb:   214, 90, 37;
    --accent-secondary-rgb: var(--accent-primary-rgb);
    --accent-purple-rgb:    131, 71, 208;
    --accent-cyan-rgb:      0, 184, 168;
    --accent-gradient:      linear-gradient(135deg,
                                color-mix(in srgb, var(--accent-primary) 100%, white 18%),
                                var(--accent-primary));

    /* State colors — adjusted for light backgrounds. */
    --state-success:        #2e8049;
    --state-warning:        #c89a1a;
    --state-danger:         #b53636;
    --state-info:           #2c6db5;
    --state-danger-rgb:     181, 54, 54;
    --state-success-rgb:    46, 128, 73;
    --state-warning-rgb:    200, 154, 26;

    /* Shadows — much subtler than the dark theme's blur+alpha. On
       light surfaces, dark shadows read heavy quickly. */
    --shadow-sm:            0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 6px 18px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 16px 40px rgba(0, 0, 0, 0.14);

    /* Overlay tints — INVERTED. Dark wash on light surfaces, mirroring
       the white wash on dark in the default theme. */
    --overlay-hover:        rgba(0, 0, 0, 0.04);
    --overlay-active:       rgba(0, 0, 0, 0.08);
    --overlay-selected:     rgba(0, 0, 0, 0.06);

    /* Audio-quality badges — darkened gradient stops for contrast on
       light surfaces. Same hue identity (green/gold/purple+pink) but
       the chroma reads correctly against white. */
    --badge-lossy-format-bg:        #d8d8e0;
    --badge-lossy-format-text:      #4a4a55;
    --badge-lossy-quality-bg:       #ebebef;
    --badge-lossy-quality-text:     #6a6a78;

    --badge-lossless-format-bg:     linear-gradient(135deg, #1c5c30, #267a45);
    --badge-lossless-format-text:   #ffffff;
    --badge-lossless-quality-bg:    rgba(38, 122, 69, 0.18);
    --badge-lossless-quality-text:  #1c5c30;

    --badge-hires-format-bg:        linear-gradient(135deg, #a6710f, #c8951a);
    --badge-hires-format-text:      #ffffff;
    --badge-hires-quality-bg:       rgba(200, 149, 26, 0.20);
    --badge-hires-quality-text:     #8a5e0a;

    --badge-hires-glow:             0 0 0 1px rgba(200, 149, 26, 0.30),
                                    0 2px 8px rgba(200, 149, 26, 0.18);

    --badge-dsd-format-bg:          linear-gradient(135deg, #581478, #b81854);
    --badge-dsd-format-text:        #ffffff;
    --badge-dsd-quality-bg:         rgba(184, 24, 84, 0.18);
    --badge-dsd-quality-text:       #951646;
    --badge-dsd-glow:               0 0 0 1px rgba(184, 24, 84, 0.30),
                                    0 2px 10px rgba(184, 24, 84, 0.18);

    /* Provider badges — same hues but ~10% darker for white-bg legibility. */
    --provider-musicbrainz-bg:      rgba(160, 60, 30, 0.95);
    --provider-discogs-bg:          rgba(36, 100, 50, 0.95);
    --provider-deezer-bg:           rgba(0, 80, 180, 0.95);
    --provider-audiodb-bg:          rgba(86, 30, 140, 0.95);

    /* Aliases — keep working until the color sweep retires them. */
    --bg-dark:              var(--surface-app);
    --bg-sidebar:           var(--surface-sidebar);
    --bg-card:              var(--surface-card);
    --bg-card-hover:        var(--surface-card-hover);
}
