/* ===================== THEME TOKENS ===================== */

/* Root fallback (optional) */
:root {
    /* Semantic Core */
    --color-primary: #ff6f61;
    --color-primary-accent: #e57373;
    --color-primary-hover: var(--color-primary-accent);
    --color-highlight: var(--color-primary);
    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;

    /* Text */
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-text-inverse: #ffffff;
    --color-text-faint: #adb5bd;
    --color-text-strong: #212529;

    /* Surfaces */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f5f5;
    --color-surface-muted: #f3f3f3;
    --color-surface-tier-row: #fafbfd;
    --color-surface-pill: #e7ecf2;

    /* Borders */
    --color-border: #dee2e6;
    --color-border-soft: #d0d0d0;
    --color-border-subtle: #d8dfe6;
    --color-border-pill: #d0d7de;
    --color-border-dashed: #c8d0d7;

    /* Special Brand / External */
    --color-spotify: #1DB954;
    --color-spotify-hover: #1ed760;

    /* Gradients (defaults) */
    --gradient-bg-start: #f5f5f5;
    --gradient-bg-end: #fbfbfb;

    /* Tier Gradients (S through F) */
    --tier-s-start: #ff5a5f;
    --tier-s-end: #ff8a3d;
    --tier-a-start: #ff9f1c;
    --tier-a-end: #ffbf69;
    --tier-b-start: #ffd447;
    --tier-b-end: #ffe27a;
    --tier-b-text: #3e3e3e;
    --tier-c-start: #5bc0eb;
    --tier-c-end: #55a9e6;
    --tier-d-start: #9b5de5;
    --tier-d-end: #6a4c93;
    --tier-f-start: #4a4e69;
    --tier-f-end: #22223b;

    /* Shadows (base RGBA colors for reuse) */
    --shadow-rgb: 0,0,0; /* use with rgba(var(--shadow-rgb), <alpha>) */

    /* Pills / Labels */
    --pill-bg: var(--color-surface-pill);
    --pill-fg: #4a5662;

    /* Scrollbar */
    --scrollbar-thumb-rgb: 0,0,0;
    --scrollbar-thumb-alpha: 0.18;

    /* Secondary button — neutral grey */
    --secondary-bg-color:    #6c757d;  /* default bg & border */
    --secondary-border-color:#6c757d;
    --secondary-hover-color: #5a6268;  /* slightly darker on hover */
    --secondary-hover-text-color: #ffffff;
}

/* ===================== LIGHT MODE ===================== */
body.light-mode {
    /* Core */
    --color-primary: #ff6f61;
    --color-primary-accent: #e57373;
    --color-primary-hover: var(--color-primary-accent);
    --color-highlight: var(--color-primary);

    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;

    /* Text */
    --color-text: #212529;
    --color-text-muted: #6c757d;
    --color-text-faint: #adb5bd;
    --color-text-inverse: #ffffff;
    --color-text-strong: #212529;

    /* Surfaces */
    --color-bg: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f5f5f5;
    --color-surface-muted: #f3f3f3;
    --color-surface-tier-row: #fafbfd;
    --color-surface-item: #f0f2f5;
    --color-slightly-faded-bg: #c5c6c7;

    /* Pills */
    --pill-bg: #e7ecf2;
    --pill-fg: #4a5662;

    /* Borders */
    --color-border: #dee2e6;
    --color-border-soft: #d0d0d0;
    --color-border-subtle: #d8dfe6;
    --color-border-pill: #d0d7de;
    --color-border-dashed: #c8d0d7;
    --color-border-slightly-faded: #b4b4b4;


    /* Brand / External */
    --color-spotify: #1DB954;
    --color-spotify-hover: #1ed760;

    /* Gradients */
    --gradient-bg-start: #f5f5f5;
    --gradient-bg-end: #fbfbfb;

    /* Progress */
    --progress-bg-color: var(--color-bg);

    /* Scrollbar */
    --scrollbar-thumb-rgb: 0,0,0;
    --scrollbar-thumb-alpha: 0.18;
}

/* ===================== DARK MODE ===================== */
body.dark-mode {
    /* Core */
    --color-primary: #b26e63;
    --color-primary-accent: #c07d72;
    --color-primary-hover: var(--color-primary-accent);
    --color-highlight: #b26e63;

    --color-danger: #dc3545;
    --color-danger-hover: #bb2d3b;

    /* Text */
    --color-text: #f8f9fa;
    --color-text-muted: #a0a0a0;
    --color-text-faint: #888888;
    --color-text-inverse: #1e1e1e;
    --color-text-strong: #f8f9fa;

    /* Surfaces */
    --color-bg: #1e1e1e;
    --color-surface: #2b2b2b;
    --color-surface-alt: #2b2b2b;
    --color-surface-muted: #323232;
    --color-surface-tier-row: #25282b;
    --color-surface-item: #33363a;
    --color-slightly-faded-bg: #c5c6c7;

    /* Pills */
    --pill-bg: #3a4147;
    --pill-fg: #d1d7dc;

    /* Borders */
    --color-border: #444444;
    --color-border-soft: #505050;
    --color-border-subtle: #3e464d;
    --color-border-pill: #4a5157;
    --color-border-dashed: #5a636b;
    --color-border-slightly-faded: #b4b4b4;

    /* Brand / External (unchanged) */
    --color-spotify: #1DB954;
    --color-spotify-hover: #1ed760;

    /* Gradients */
    --gradient-bg-start: #1e1e1e;
    --gradient-bg-end: #2b2b2b;

    /* Progress */
    --progress-bg-color: var(--color-bg);

    /* Scrollbar */
    --scrollbar-thumb-rgb: 255,255,255;
    --scrollbar-thumb-alpha: 0.25;
}

/* ===================== DERIVED / ALIASES ===================== */
body.light-mode,
body.dark-mode {
    --primary-color: var(--color-primary);
    --accent-color: var(--color-primary-accent);
    --hover-accent-color: var(--color-primary-hover);
    --text-color: var(--color-text);
    --muted-text-color: var(--color-text-muted);
    --form-text-color: var(--color-text);
    --form-placeholder-color: var(--color-text-faint);

    --navbar-bg-color: var(--color-bg);
    --navbar-text-color: var(--text-color);
    --icon-color: var(--color-primary);
    --icon-hover-color: var(--color-primary-accent);

    --button-bg-color: var(--color-primary);
    --button-hover-color: var(--color-primary-accent);
    --button-text-color: #ffffff;
    --button-hover-text-color: #ffffff;
    --button-border-color: var(--color-primary);

    --danger-color: var(--color-danger);
    --danger-hover-color: var(--color-danger-hover);

    --card-bg-color: var(--color-surface);
    --card-border-color: var(--color-border);
    --card-text-color: var(--color-text);

    --background-gradient-start: var(--gradient-bg-start);
    --background-gradient-end: var(--gradient-bg-end);
    --background-color: var(--color-bg);

    --surface-muted: var(--color-surface-muted);
    --surface-tier-row: var(--color-surface-tier-row);

    --pill-fg: var(--pill-fg);

    --tier-row-border: var(--color-border-subtle);
}