/* ========================================
   iLoveMusic Design Tokens — Fallback Layer (L1)
   ----------------------------------------------
   These values are the hardcoded defaults that ship with the app.
   They match the CURRENT dark theme exactly, so adding this file
   does not change any visual.

   Layer order:
     L1 (this file)              — defaults, always loaded
     L2 (_ThemeTokens partial)   — DB/JSON overrides, injected at runtime
     L3 (per-view CSS)           — if it still uses var(--ilomu-*), it themes
     L4 ?theme=default           — admin safety hatch, bypasses L2

   Token naming:
     --ilomu-*  is the iLoveMusic semantic token (the source of truth).
     --bs-*     overrides Bootstrap 5.3's own tokens, so its components theme.

   Adding a new token? Add it here with a sensible default, document it,
   then make it editable in the admin theme editor.
   ======================================== */

:root {
    /* ----- Typography scale (one-time brand decision, not per-theme) -----
       Six semantic roles cover ~95% of headings/labels across the app.
       Use the matching .ilomu-* helper class in markup, or apply directly
       via var(--ilomu-fs-...) in component CSS. */
    --ilomu-fs-page-title: 1.75rem;         /* page-level <h1>/<h2> */
    --ilomu-fs-section-title: 1.25rem;      /* accordion headers, major dividers */
    --ilomu-fs-card-title: 1.05rem;         /* card titles, sub-section headings */
    --ilomu-fs-stat-label: 0.85rem;         /* small label above a numeric stat */
    --ilomu-fs-stat-value: 2.5rem;          /* large numeric readout */
    --ilomu-fs-body: 0.95rem;               /* default body / form labels */
    --ilomu-fs-small: 0.8rem;               /* helper text, captions */

    --ilomu-fw-heading: 600;                /* semibold for headings */
    --ilomu-fw-medium: 500;                 /* medium for labels */
    --ilomu-fw-body: 400;

    /* ----- Surfaces ----- */
    --ilomu-bg: #000000;                    /* page background (body) */
    --ilomu-surface: #212529;               /* cards, dropdowns, modals, dark form controls */
    --ilomu-surface-elevated: #2c3034;      /* accordion-active, hover surfaces */
    --ilomu-surface-sunken: #1a1d20;        /* table headers, accordion-button */

    /* ----- Text ----- */
    --ilomu-text: #ffffff;                  /* body text */
    --ilomu-text-muted: #6c757d;            /* placeholders, secondary labels */
    --ilomu-text-emphasis: #ffffff;         /* headings, strong text */
    --ilomu-text-on-accent: #ffffff;        /* text rendered on top of --ilomu-accent */

    /* ----- Borders ----- */
    --ilomu-border: #495057;                /* primary border (tables, cards, form controls) */
    --ilomu-border-subtle: #444444;         /* softer dividers (.table-dark legacy) */

    /* ----- Brand accent (orange) ----- */
    --ilomu-accent: #ff8c00;                /* .btn-orange, .text-orange, .border-orange */
    --ilomu-accent-hover: #e67e00;          /* .btn-orange:hover */
    --ilomu-accent-disabled: #cc5500;       /* disabled orange */
    --ilomu-accent-focus-ring: rgba(255, 140, 0, 0.25);

    /* ----- Login orange (separate — brighter, distinct CTA) ----- */
    --ilomu-login-accent: #ff6600;
    --ilomu-login-accent-hover: #ff8800;

    /* ----- Semantic state ----- */
    --ilomu-info: #4169E1;                  /* royal blue info icons */
    --ilomu-info-hover: #5981fb;
    --ilomu-danger: #ff0000;                /* required-field notice */
    --ilomu-success: #198754;               /* success badges, .btn-outline-success */
    --ilomu-warning: #ffc107;               /* caution badges, .btn-outline-warning */
    --ilomu-code-color: #0dcaf0;            /* inline <code> */

    /* ----- Focus ring (generic, non-accent) ----- */
    --ilomu-focus-ring-inner: #ffffff;
    --ilomu-focus-ring-outer: #258cfb;

    /* ----- External brand colors (intentional fixed values, not theme-driven) ----- */
    --ilomu-brand-apple: #fc3c44;
    --ilomu-brand-apple-on: #ffffff;
    --ilomu-brand-spotify: #1DB954;
    --ilomu-brand-spotify-on: #000000;
    --ilomu-brand-youtube: #FF0000;
    --ilomu-brand-google: #4285F4;
    --ilomu-brand-instagram: #E1306C;
    --ilomu-brand-lastfm: #D51007;
    --ilomu-brand-wikipedia: #636466;
    --ilomu-brand-catalog: #9C27B0;
    --ilomu-brand-setlistfm: #FF6F00;
    --ilomu-brand-discogs: #333333;
    --ilomu-brand-reddit: #FF4500;
    --ilomu-brand-bandcamp: #1DA0C3;
    --ilomu-brand-critical: #9C27B0;
    --ilomu-brand-facebook: #1877F2;
    --ilomu-brand-twitter: #1DA1F2;
    --ilomu-brand-tiktok: #000000;
    --ilomu-brand-openai: #10a37f;
    --ilomu-brand-gemini: #4285f4;
    --ilomu-brand-purple: #b388ff;

    /* Marketing palette — used by public Home/* and marketing pages.
       Distinct from workspace accent so the public site keeps a cohesive
       brand voice while still flipping with theme via the token resolution. */
    --ilomu-marketing-primary: #FF6B35;
    --ilomu-marketing-primary-hover: #e55a2a;
    --ilomu-marketing-accent: #4ECDC4;
    /* Marketing chrome (navbar / footer / hero gradient endpoint) — ALWAYS dark
       regardless of theme, because the marketing pages have a deliberate
       dark-chrome look. The text-emphasis below themes for use in titles. */
    --ilomu-marketing-chrome: #1a1a1a;
    --ilomu-marketing-chrome-text: #ffffff;

    /* ----- Decorative shadows / soft-tint surfaces ----- */
    --ilomu-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --ilomu-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --ilomu-shadow-overlay: rgba(0, 0, 0, 0.8);
    /* Loading scrim — dim the page during async ops. Theme-neutral on purpose:
       a 35% black wash works on both light and dark backgrounds, and content
       inside an overlay is rendered in white via the .ilomu-overlay-content
       helper so it stays readable regardless of the active theme. */
    --ilomu-scrim: rgba(0, 0, 0, 0.35);

    /* Soft tints derived from semantic colors — used as low-alpha backgrounds. */
    --ilomu-info-soft: rgba(23, 162, 184, 0.2);
    --ilomu-danger-soft: rgba(220, 53, 69, 0.3);
    --ilomu-warning-soft: rgba(255, 193, 7, 0.2);
    --ilomu-warning-soft-faint: rgba(255, 193, 7, 0.1);
    --ilomu-danger-soft-faint: rgba(220, 53, 69, 0.1);
    --ilomu-primary-soft: rgba(13, 110, 253, 0.2);
    --ilomu-primary-soft-faint: rgba(13, 110, 253, 0.1);
    --ilomu-success-soft: rgba(25, 135, 84, 0.2);
    --ilomu-success-soft-faint: rgba(25, 135, 84, 0.1);
    --ilomu-purple-soft: rgba(111, 66, 193, 0.15);
    --ilomu-brand-apple-soft: rgba(252, 60, 68, 0.2);
    --ilomu-brand-spotify-soft: rgba(30, 215, 96, 0.2);

    /* Developer console log surface (GitHub-Dark style) — used by SongStatistics
       and SongStatsEmbeddings log viewers. Intentionally fixed for terminal feel. */
    --ilomu-console-bg: #0d1117;
    --ilomu-console-text: #c9d1d9;
    --ilomu-console-text-muted: #8b949e;
    --ilomu-console-success: #3fb950;
    --ilomu-console-info: #58a6ff;
    --ilomu-console-warning: #d29922;
    --ilomu-console-error: #f85149;
    --ilomu-console-critical: #ff7b72;
    --ilomu-console-trace-bg: rgba(139, 148, 158, 0.1);
    --ilomu-console-debug-bg: rgba(136, 146, 157, 0.1);
    --ilomu-console-info-bg: rgba(56, 139, 253, 0.1);
    --ilomu-console-warning-bg: rgba(210, 153, 34, 0.15);
    --ilomu-console-error-bg: rgba(248, 81, 73, 0.15);
    --ilomu-console-critical-bg: rgba(248, 81, 73, 0.25);
    --ilomu-console-scrollbar-track: #161b22;
    --ilomu-console-scrollbar-thumb: #30363d;
    --ilomu-console-scrollbar-thumb-hover: #484f58;

    /* Genre family palette — categorical colors for SongAnalysis genre tag cloud.
       Each family has a from/to gradient stop and an on-color for tag text. */
    --ilomu-genre-rock-from: #e74c3c;       --ilomu-genre-rock-to: #c0392b;       --ilomu-genre-rock-on: #ffffff;
    --ilomu-genre-electronic-from: #9b59b6; --ilomu-genre-electronic-to: #8e44ad; --ilomu-genre-electronic-on: #ffffff;
    --ilomu-genre-pop-from: #e91e63;        --ilomu-genre-pop-to: #c2185b;        --ilomu-genre-pop-on: #ffffff;
    --ilomu-genre-hiphop-from: #f39c12;     --ilomu-genre-hiphop-to: #d35400;     --ilomu-genre-hiphop-on: #ffffff;
    --ilomu-genre-jazz-from: #3498db;       --ilomu-genre-jazz-to: #2980b9;       --ilomu-genre-jazz-on: #ffffff;
    --ilomu-genre-classical-from: #1abc9c;  --ilomu-genre-classical-to: #16a085;  --ilomu-genre-classical-on: #ffffff;
    --ilomu-genre-folk-from: #27ae60;       --ilomu-genre-folk-to: #229954;       --ilomu-genre-folk-on: #ffffff;
    --ilomu-genre-latin-from: #e67e22;      --ilomu-genre-latin-to: #d68910;      --ilomu-genre-latin-on: #ffffff;
    --ilomu-genre-reggae-from: #2ecc71;     --ilomu-genre-reggae-to: #27ae60;     --ilomu-genre-reggae-on: #ffffff;
    --ilomu-genre-blues-from: #34495e;      --ilomu-genre-blues-to: #2c3e50;      --ilomu-genre-blues-on: #ffffff;
    --ilomu-genre-funk-from: #f1c40f;       --ilomu-genre-funk-to: #d4ac0d;       --ilomu-genre-funk-on: #212529;
    --ilomu-genre-soul-from: #8e44ad;       --ilomu-genre-soul-to: #7d3c98;       --ilomu-genre-soul-on: #ffffff;
    --ilomu-genre-rnb-from: #5dade2;        --ilomu-genre-rnb-to: #3498db;        --ilomu-genre-rnb-on: #ffffff;
    --ilomu-genre-metal-from: #2c3e50;      --ilomu-genre-metal-to: #1a252f;      --ilomu-genre-metal-on: #ffffff;
    --ilomu-genre-punk-from: #e74c3c;       --ilomu-genre-punk-to: #922b21;       --ilomu-genre-punk-on: #ffffff;
    --ilomu-genre-country-from: #d4a574;    --ilomu-genre-country-to: #b8956c;    --ilomu-genre-country-on: #212529;
    --ilomu-genre-world-from: #17a2b8;      --ilomu-genre-world-to: #138496;      --ilomu-genre-world-on: #ffffff;
    --ilomu-genre-other-from: #6c757d;      --ilomu-genre-other-to: #5a6268;      --ilomu-genre-other-on: #ffffff;

    /* Popularity heatmap palette — 21 stops from cool→warm, used by SongDistribution.
       Intentionally fixed gradient regardless of theme so popularity reads
       consistently. Indices map to score buckets (0, 1–5, 6–10 … 96–100). */
    --ilomu-popularity-0:  #6c757d;
    --ilomu-popularity-1:  #adb5bd;
    --ilomu-popularity-2:  #8ecae6;
    --ilomu-popularity-3:  #219ebc;
    --ilomu-popularity-4:  #126782;
    --ilomu-popularity-5:  #023047;
    --ilomu-popularity-6:  #2a9d8f;
    --ilomu-popularity-7:  #52b788;
    --ilomu-popularity-8:  #76c893;
    --ilomu-popularity-9:  #b5e48c;
    --ilomu-popularity-10: #d9ed92;
    --ilomu-popularity-11: #f4d35e;
    --ilomu-popularity-12: #f9c74f;
    --ilomu-popularity-13: #f8961e;
    --ilomu-popularity-14: #f3722c;
    --ilomu-popularity-15: #e76f51;
    --ilomu-popularity-16: #e63946;
    --ilomu-popularity-17: #d62828;
    --ilomu-popularity-18: #9d0208;
    --ilomu-popularity-19: #6a040f;
    --ilomu-popularity-20: #370617;

    /* Daypart pill colors — semantic time-of-day indicators (RadioFitArtist) */
    --ilomu-daypart-morning-bg: rgba(255, 183, 77, 0.20);
    --ilomu-daypart-morning-fg: #ffb74d;
    --ilomu-daypart-morning-bd: rgba(255, 183, 77, 0.35);
    --ilomu-daypart-midday-bg: rgba(255, 235, 59, 0.18);
    --ilomu-daypart-midday-fg: #fdd835;
    --ilomu-daypart-midday-bd: rgba(255, 235, 59, 0.30);
    --ilomu-daypart-afternoon-bg: rgba(255, 152, 0, 0.20);
    --ilomu-daypart-afternoon-fg: #ffa726;
    --ilomu-daypart-afternoon-bd: rgba(255, 152, 0, 0.35);
    --ilomu-daypart-evening-bg: rgba(149, 117, 205, 0.22);
    --ilomu-daypart-evening-fg: #b39ddb;
    --ilomu-daypart-evening-bd: rgba(149, 117, 205, 0.35);
    --ilomu-daypart-overnight-bg: rgba(66, 165, 245, 0.18);
    --ilomu-daypart-overnight-fg: #64b5f6;
    --ilomu-daypart-overnight-bd: rgba(66, 165, 245, 0.30);

    /* Translucent overlays — theme-neutral (work in dark and light). */
    --ilomu-overlay-on-bright: rgba(255, 255, 255, 0.05);
    --ilomu-overlay-on-media: rgba(255, 255, 255, 0.2);
    --ilomu-overlay-dim: rgba(0, 0, 0, 0.05);
    --ilomu-grid-line: rgba(255, 255, 255, 0.08);

    /* Chart palette — categorical data colors, fixed regardless of theme.
       Use --ilomu-chart-N (1..20) for distinct series in charts. */
    --ilomu-chart-1:  #e67e22;
    --ilomu-chart-2:  #3498db;
    --ilomu-chart-3:  #2ecc71;
    --ilomu-chart-4:  #e74c3c;
    --ilomu-chart-5:  #9b59b6;
    --ilomu-chart-6:  #1abc9c;
    --ilomu-chart-7:  #f39c12;
    --ilomu-chart-8:  #e84393;
    --ilomu-chart-9:  #00cec9;
    --ilomu-chart-10: #fdcb6e;
    --ilomu-chart-11: #6c5ce7;
    --ilomu-chart-12: #fab1a0;
    --ilomu-chart-13: #74b9ff;
    --ilomu-chart-14: #a29bfe;
    --ilomu-chart-15: #ff7675;
    --ilomu-chart-16: #20c997;
    --ilomu-chart-17: #0dcaf0;
    --ilomu-chart-18: #6f42c1;
    --ilomu-chart-19: #d63384;
    --ilomu-chart-20: #fd7e14;

    /* Chart "majors" palette (used by RadioAffiliations) */
    --ilomu-chart-major-1: #dc3545;
    --ilomu-chart-major-2: #e35d6a;
    --ilomu-chart-major-3: #e8838f;
    --ilomu-chart-major-4: #6c757d;

    /* Feature category accents (MAEST/Style markers in FeatureImportance chart). */
    --ilomu-feature-maest: #6f42c1;
    --ilomu-feature-style: #20c997;

    /* Quality tiers — used by ML model AUC/R² grading and similar score gradients. */
    --ilomu-tier-na: #6c757d;
    --ilomu-tier-outstanding: #0f7b34;
    --ilomu-tier-excellent: #28a745;
    --ilomu-tier-good: #20c997;
    --ilomu-tier-fair: #ffc107;
    --ilomu-tier-poor: #fd7e14;
    --ilomu-tier-weak: #dc3545;

    /* ====================================
       Bootstrap 5.3 overrides
       Re-pointing Bootstrap's own tokens at our semantic tokens means
       every .btn-primary, .form-control, .table, .modal, etc. themes
       automatically. Edit the --ilomu-* above; --bs-* follow.
       ==================================== */
    --bs-body-bg: var(--ilomu-bg);
    --bs-body-color: var(--ilomu-text);
    --bs-body-secondary-color: var(--ilomu-text-muted);
    --bs-secondary-color: var(--ilomu-text-muted);   /* used by .text-muted, .text-secondary */
    --bs-tertiary-color: var(--ilomu-text-muted);
    --bs-emphasis-color: var(--ilomu-text-emphasis);
    --bs-border-color: var(--ilomu-border);
    --bs-secondary-bg: var(--ilomu-surface);
    --bs-tertiary-bg: var(--ilomu-surface-elevated);
}

/* ----- Light theme deltas -----
   Only override what differs from L1 defaults. The dark defaults above
   ARE the dark theme; this block flips surfaces/text for light.
   These values are starter palette only — to be tuned in the editor. */
[data-bs-theme="light"] {
    --ilomu-bg: #ffffff;
    --ilomu-surface: #f8f9fa;
    --ilomu-surface-elevated: #e9ecef;
    --ilomu-surface-sunken: #dee2e6;

    --ilomu-text: #212529;
    --ilomu-text-muted: #6c757d;
    --ilomu-text-emphasis: #000000;

    --ilomu-border: #dee2e6;
    --ilomu-border-subtle: #e9ecef;

    /* Accent stays orange in light too — brand is brand. */
}