/* =====================================================================
   Sepia theme — warm cream-and-brown palette, easy on the eyes for
   long listening sessions. Light variant (dark text on light surfaces)
   with a deeper amber accent.
   ===================================================================== */
:root[data-theme="sepia"] {
    --surface-app:          #f4ecdc;
    --surface-app-rgb:      244, 236, 220;
    --surface-sidebar:      #ece1c8;
    --surface-card:         #fbf6e8;
    --surface-card-hover:   #f3ead0;
    --surface-elevated:     #fbf6e8;
    --surface-overlay:      rgba(60, 40, 20, 0.45);
    --surface-player:       #ece1c8;

    --text-primary:         #3a2810;
    --text-secondary:       #6e5638;
    --text-muted:           #9c8665;
    --text-on-accent:       #fbf6e8;

    --border-subtle:        #d8c6a0;
    --border-strong:        #b89c70;
    --border-focus:         #c45a1a;

    /* Accents tilted toward the warm side — the primary is closer to
       a burnt sienna than the dark theme's pure orange. */
    --accent-primary:       #c45a1a;
    --accent-secondary:     var(--accent-primary);
    --accent-purple:        #7a4ec0;
    --accent-cyan:          #1a8e80;
    --accent-primary-rgb:   196, 90, 26;
    --accent-secondary-rgb: var(--accent-primary-rgb);
    --accent-purple-rgb:    122, 78, 192;
    --accent-cyan-rgb:      26, 142, 128;
    --accent-gradient:      linear-gradient(135deg,
                                color-mix(in srgb, var(--accent-primary) 100%, white 18%),
                                var(--accent-primary));

    --state-success:        #2e7038;
    --state-warning:        #b88820;
    --state-danger:         #a84030;
    --state-info:           #2a5e8c;
    --state-danger-rgb:     168, 64, 48;
    --state-success-rgb:    46, 112, 56;
    --state-warning-rgb:    184, 136, 32;

    --shadow-sm:            0 2px 6px rgba(80, 50, 20, 0.10);
    --shadow-md:            0 6px 18px rgba(80, 50, 20, 0.14);
    --shadow-lg:            0 16px 40px rgba(80, 50, 20, 0.20);

    /* Overlay tints — warm dark wash mirroring the warm light surfaces. */
    --overlay-hover:        rgba(58, 40, 16, 0.05);
    --overlay-active:       rgba(58, 40, 16, 0.10);
    --overlay-selected:     rgba(58, 40, 16, 0.07);

    /* Audio-quality badges — sepia-tinted hues. The greens / golds /
       purples are pulled slightly toward warmth so badges read as part
       of the sepia palette rather than visually fighting it. */
    --badge-lossy-format-bg:        #d8c6a0;
    --badge-lossy-format-text:      #4a3a18;
    --badge-lossy-quality-bg:       #ece1c8;
    --badge-lossy-quality-text:     #6e5638;

    --badge-lossless-format-bg:     linear-gradient(135deg, #2a5a30, #3d8048);
    --badge-lossless-format-text:   #fbf6e8;
    --badge-lossless-quality-bg:    rgba(61, 128, 72, 0.20);
    --badge-lossless-quality-text:  #2a5a30;

    --badge-hires-format-bg:        linear-gradient(135deg, #a06a14, #c8951a);
    --badge-hires-format-text:      #fbf6e8;
    --badge-hires-quality-bg:       rgba(200, 149, 26, 0.22);
    --badge-hires-quality-text:     #7a5008;
    --badge-hires-glow:             0 0 0 1px rgba(200, 149, 26, 0.30),
                                    0 2px 8px rgba(200, 149, 26, 0.20);

    --badge-dsd-format-bg:          linear-gradient(135deg, #5a1864, #b03c5e);
    --badge-dsd-format-text:        #fbf6e8;
    --badge-dsd-quality-bg:         rgba(176, 60, 94, 0.18);
    --badge-dsd-quality-text:       #7a1844;
    --badge-dsd-glow:               0 0 0 1px rgba(176, 60, 94, 0.30),
                                    0 2px 10px rgba(176, 60, 94, 0.20);

    /* Provider badges — slightly desaturated to sit comfortably on the
       cream background without screaming. */
    --provider-musicbrainz-bg:      rgba(150, 56, 28, 0.95);
    --provider-discogs-bg:          rgba(40, 96, 50, 0.95);
    --provider-deezer-bg:           rgba(28, 80, 168, 0.95);
    --provider-audiodb-bg:          rgba(82, 32, 130, 0.95);

    --bg-dark:              var(--surface-app);
    --bg-sidebar:           var(--surface-sidebar);
    --bg-card:              var(--surface-card);
    --bg-card-hover:        var(--surface-card-hover);
}