/* ═══════════════════════════════════════════════════════════════════════════
   MCC Design Token System
   Single source of truth for all colors, surfaces, shadows, and spacing.

   Usage:
     - Reference --mcc-* tokens in component CSS instead of raw color values.
     - To create a new theme: add [data-mcc-theme="your-theme"] and redefine tokens.
     - Bootstrap --bs-* overrides are included per-theme so Bootstrap components
       inherit the theme automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smooth theme transitions (toggled via JS during theme switch only) ── */
html.mcc-theme-transitioning,
html.mcc-theme-transitioning * {
    transition:
        background-color 0.25s ease,
        border-color     0.22s ease,
        color            0.18s ease,
        box-shadow       0.25s ease !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════════ */
:root,
[data-mcc-theme="light"] {
    color-scheme: light;

    /* ── Backgrounds ───────────────────────────────── */
    --mcc-bg:           #f0ebe4;   /* page canvas                          */
    --mcc-bg-surface:   #faf8f5;   /* cards, modals — float above page     */
    --mcc-bg-raised:    #e8e2db;   /* navbar, footer, muted chrome         */
    --mcc-bg-inset:     #ede8e1;   /* secondary surfaces                   */
    --mcc-bg-subtle:    #e4dfd8;   /* tertiary, barely differentiated      */

    /* Surface alias — used throughout for card/modal bg */
    --mcc-surface: var(--mcc-bg-surface);

    /* ── Borders ───────────────────────────────────── */
    --mcc-border:        #d9d3cb;
    --mcc-border-subtle: rgba(46, 44, 41, 0.12);

    /* ── Text ──────────────────────────────────────── */
    --mcc-text:       #2e2c29;
    --mcc-text-muted: rgba(46, 44, 41, 0.60);
    --mcc-text-dim:   rgba(46, 44, 41, 0.38);

    /* ── Gold accent (numismatic brand color) ──────── */
    --mcc-gold:        #b08030;
    --mcc-gold-subtle: rgba(176, 128, 48, 0.10);
    --mcc-gold-border: rgba(176, 128, 48, 0.30);

    /* ── Action blue (Add to Collection / selected nav) */
    --mcc-action-blue:        #1458b0;
    --mcc-action-blue-subtle: rgba(20, 88, 176, 0.08);
    --mcc-action-blue-border: rgba(20, 88, 176, 0.52);

    /* ── Wish-list red (pastel/soft) ───────────────── */
    --mcc-wish-red:        #b83040;
    --mcc-wish-red-subtle: rgba(184, 48, 64, 0.08);
    --mcc-wish-red-border: rgba(184, 48, 64, 0.48);
    --mcc-wish-red-bar:    rgba(184, 48, 64, 0.55);

    /* ── Find-listings green (soft sage) ──────────── */
    --mcc-find-green:        #2d7a50;
    --mcc-find-green-subtle: rgba(45, 122, 80, 0.08);
    --mcc-find-green-border: rgba(45, 122, 80, 0.40);

    /* ── Coin Detail Modal tokens ──────────────────── */
    --cdm-overview-bg:   var(--mcc-bg-inset);
    --cdm-label-color:   #7a6240;
    --cdm-section-color: #9a7a48;
    --cdm-tab-active-color: var(--mcc-gold);
    --cdm-input-radius:  6px;
    --cdm-price-refresh-size: .78rem;

    /* ── Skeleton loading animation ───────────────── */
    --mcc-skeleton-base:      #eae4dd;
    --mcc-skeleton-highlight: #e0d9d1;

    /* ── Shadows ───────────────────────────────────── */
    --mcc-shadow-card:  0 1px 3px rgba(46,44,41,0.06), 0 0 0 1px rgba(46,44,41,0.03);
    --mcc-shadow-modal: 0 8px 40px rgba(46,44,41,0.14), 0 2px 4px rgba(46,44,41,0.05);
    --mcc-shadow-glow:  none;

    /* ── Interactive state tints ───────────────────── */
    --mcc-hover-tint:    rgba(13, 110, 253, 0.07);
    --mcc-active-tint:   rgba(13, 110, 253, 0.11);
    --mcc-selected-tint: var(--mcc-gold-subtle);

    /* ── Bootstrap variable overrides ─────────────── */
    --bs-body-bg:                  var(--mcc-bg);
    --bs-body-color:               var(--mcc-text);
    --bs-secondary-color:          var(--mcc-text-muted);
    --bs-tertiary-color:           var(--mcc-text-dim);
    --bs-border-color:             var(--mcc-border);
    --bs-border-color-translucent: var(--mcc-border-subtle);
    --bs-body-tertiary-bg:         var(--mcc-bg-raised);
    --bs-secondary-bg:             var(--mcc-bg-inset);
    --bs-tertiary-bg:              var(--mcc-bg-subtle);
    --bs-link-color:               var(--mcc-action-blue);
    --bs-link-hover-color:         var(--mcc-action-blue);

    /* ── Sidebar tokens ────────────────────────────── */
    --mcc-sidebar-bg:            #e2dcd5;
    --mcc-sidebar-border:        rgba(46, 44, 41, 0.10);
    --mcc-sidebar-text:          rgba(46, 44, 41, 0.82);
    --mcc-sidebar-text-dim:      rgba(46, 44, 41, 0.40);
    --mcc-sidebar-hover:         rgba(46, 44, 41, 0.06);
    --mcc-sidebar-active-bg:     rgba(176, 128, 48, 0.12);
    --mcc-sidebar-active-color:  #7a5800;
    --mcc-sidebar-active-border: #b08030;
    --mcc-sidebar-section-color: rgba(46, 44, 41, 0.58);

    /* ── Gradient tokens ─────────────────────────────── */
    --mcc-gradient-gold:             linear-gradient(135deg, #b08030, #d4a042);
    --mcc-gradient-ebay:             linear-gradient(135deg, #e53238, #0064d2);
    --mcc-gradient-purple-blue:      linear-gradient(135deg, #6f42c1, #0d6efd);
    --mcc-gradient-scan-blue-green:  linear-gradient(135deg, #0d6efd, #198754);
    --mcc-gradient-scan-purple-cyan: linear-gradient(135deg, #6610f2, #0dcaf0);
    --mcc-gradient-scan-orange:      linear-gradient(135deg, #fd7e14, #ffc107);
    --mcc-gradient-scan-cyan-blue:   linear-gradient(135deg, #0dcaf0, #0d6efd);

    /* ── Callout / info-box tokens ───────────────────── */
    --mcc-callout-info-bg:        rgba(20, 88, 176, 0.07);
    --mcc-callout-info-border:    rgba(20, 88, 176, 0.18);
    --mcc-callout-success-bg:     rgba(25, 135, 84, 0.08);
    --mcc-callout-success-border: rgba(25, 135, 84, 0.25);
    --mcc-callout-warning-bg:     #fffbf0;
    --mcc-callout-warning-border: rgba(255, 193, 7, 0.30);

    /* ── Structural tokens ───────────────────────────── */
    --mcc-divider-subtle: rgba(46, 44, 41, 0.08);
    --mcc-tag-default:    #6c757d;

    /* ── Achievement toast tokens ────────────────────── */
    --mcc-toast-achievement-bg:    #fff3cd;
    --mcc-toast-achievement-color: #856404;

    /* ── Strike-type pill tokens ─────────────────────── */
    --mcc-pill-circ-bg:            rgba(185, 125,  20, 0.13);
    --mcc-pill-circ-color:         #8a5d08;
    --mcc-pill-circ-border:        rgba(185, 125,  20, 0.35);
    --mcc-pill-circ-hover-bg:      rgba(185, 125,  20, 0.20);
    --mcc-pill-circ-hover-border:  rgba(185, 125,  20, 0.55);
    --mcc-pill-circ-active-bg:     rgba(185, 125,  20, 0.28);
    --mcc-pill-circ-active-color:  #7a4d00;
    --mcc-pill-circ-active-border: #b08030;

    --mcc-pill-proof-bg:            rgba( 90,  55, 200, 0.11);
    --mcc-pill-proof-color:         #4d2fa0;
    --mcc-pill-proof-border:        rgba( 90,  55, 200, 0.30);
    --mcc-pill-proof-hover-bg:      rgba( 90,  55, 200, 0.18);
    --mcc-pill-proof-hover-border:  rgba( 90,  55, 200, 0.50);
    --mcc-pill-proof-active-bg:     rgba( 90,  55, 200, 0.24);
    --mcc-pill-proof-active-color:  #3d1f8a;
    --mcc-pill-proof-active-border: #6040c0;

    --mcc-pill-spec-bg:            rgba( 15, 140, 130, 0.11);
    --mcc-pill-spec-color:         #0a7068;
    --mcc-pill-spec-border:        rgba( 15, 140, 130, 0.30);
    --mcc-pill-spec-hover-bg:      rgba( 15, 140, 130, 0.18);
    --mcc-pill-spec-hover-border:  rgba( 15, 140, 130, 0.50);
    --mcc-pill-spec-active-bg:     rgba( 15, 140, 130, 0.24);
    --mcc-pill-spec-active-color:  #095e58;
    --mcc-pill-spec-active-border: #0a9090;

    /* ── Brand alias tokens ──────────────────────────── */
    --mcc-brand-100: var(--mcc-gold-subtle);
    --mcc-brand-600: var(--mcc-gold);

    /* ── Rarity badge tokens ─────────────────────────── */
    --rarity-common-bg:        #6c757d;
    --rarity-uncommon-bg:      #198754;
    --rarity-scarce-bg:        #0d6efd;
    --rarity-rare-bg:          #6f42c1;
    --rarity-very-rare-bg:     #dc3545;
    --rarity-extreme-gradient: linear-gradient(90deg, #c0392b, #e67e22);

    /* ── Difficulty level tokens ─────────────────────── */
    --difficulty-beginner-color:     #198754;
    --difficulty-intermediate-color: #fd7e14;
    --difficulty-advanced-color:     #dc3545;
    --difficulty-expert-color:       #6f42c1;

    /* ── Knowledge base tokens ───────────────────────── */
    --knowledge-hero-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK THEME
   Extends the sidebar's existing aesthetic (#1c1a17 / gold) to the full app.
   Atmospheric, warm-dark, collector-premium. Not cold/blue — never pure black.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-mcc-theme="dark"] {
    color-scheme: dark;

    /* ── Backgrounds — layered warm charcoal ───────── */
    --mcc-bg:           #131110;   /* page canvas — darkest, grounds the app */
    --mcc-bg-surface:   #1e1b17;   /* cards, modals — lifted above canvas    */
    --mcc-bg-raised:    #1c1a17;   /* matches sidebar — consistent chrome    */
    --mcc-bg-inset:     #191612;   /* inputs, secondary fills                */
    --mcc-bg-subtle:    #161310;   /* barely-differentiated tertiary         */

    --mcc-surface: var(--mcc-bg-surface);

    /* ── Borders — barely-there warm white ────────── */
    --mcc-border:        rgba(255, 255, 255, 0.09);
    --mcc-border-subtle: rgba(255, 255, 255, 0.05);

    /* ── Text — warm off-white, never harsh pure white */
    --mcc-text:       rgba(255, 255, 255, 0.88);
    --mcc-text-muted: rgba(255, 255, 255, 0.50);
    --mcc-text-dim:   rgba(255, 255, 255, 0.28);

    /* ── Gold accent — warmer/brighter on dark bg ──── */
    --mcc-gold:        #d4a042;
    --mcc-gold-subtle: rgba(212, 160, 66, 0.12);
    --mcc-gold-border: rgba(212, 160, 66, 0.32);

    /* ── Action blue — soft steel blue on dark bg ──── */
    --mcc-action-blue:        #7db8f7;
    --mcc-action-blue-subtle: rgba(125, 184, 247, 0.10);
    --mcc-action-blue-border: rgba(125, 184, 247, 0.42);

    /* ── Wish-list red — pastel pink-red on dark bg ── */
    --mcc-wish-red:        #f09096;
    --mcc-wish-red-subtle: rgba(240, 144, 150, 0.10);
    --mcc-wish-red-border: rgba(240, 144, 150, 0.40);
    --mcc-wish-red-bar:    rgba(240, 144, 150, 0.60);

    /* ── Find-listings green — soft mint on dark bg ── */
    --mcc-find-green:        #5dba8a;
    --mcc-find-green-subtle: rgba(93, 186, 138, 0.10);
    --mcc-find-green-border: rgba(93, 186, 138, 0.38);

    /* ── Coin Detail Modal tokens ──────────────────── */
    --cdm-overview-bg:   var(--mcc-bg-inset);
    --cdm-label-color:   rgba(212, 160, 66, 0.78);
    --cdm-section-color: rgba(212, 160, 66, 0.55);
    --cdm-tab-active-color: var(--mcc-gold);
    --cdm-input-radius:  6px;
    --cdm-price-refresh-size: .78rem;

    /* ── Skeleton loading animation ───────────────── */
    --mcc-skeleton-base:      #252219;
    --mcc-skeleton-highlight: #2e2924;

    /* ── Shadows — dark surfaces need white outlines, not black drops ─── */
    --mcc-shadow-card:  0 2px 12px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.09);
    --mcc-shadow-modal: 0 24px 64px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.13), 0 4px 16px rgba(0,0,0,0.60);
    --mcc-shadow-glow:  0 0 28px rgba(212, 160, 66, 0.10);

    /* ── Interactive state tints ───────────────────── */
    --mcc-hover-tint:    rgba(255, 255, 255, 0.04);
    --mcc-active-tint:   rgba(255, 255, 255, 0.07);
    --mcc-selected-tint: var(--mcc-gold-subtle);

    /* ── Bootstrap variable overrides ─────────────── */
    --bs-body-bg:                  var(--mcc-bg);
    --bs-body-color:               var(--mcc-text);
    --bs-secondary-color:          var(--mcc-text-muted);
    --bs-tertiary-color:           var(--mcc-text-dim);
    --bs-border-color:             var(--mcc-border);
    --bs-border-color-translucent: var(--mcc-border-subtle);
    --bs-body-tertiary-bg:         var(--mcc-bg-raised);
    --bs-secondary-bg:             var(--mcc-bg-inset);
    --bs-tertiary-bg:              var(--mcc-bg-subtle);

    /* Bootstrap link color — subtle warm blue in dark context */
    --bs-link-color: #7db8f7;
    --bs-link-hover-color: #9ecaff;

    /* ── Sidebar tokens ────────────────────────────── */
    --mcc-sidebar-bg:            #1c1a17;
    --mcc-sidebar-border:        rgba(255,255,255,0.07);
    --mcc-sidebar-text:          rgba(255,255,255,0.78);
    --mcc-sidebar-text-dim:      rgba(255,255,255,0.35);
    --mcc-sidebar-hover:         rgba(255,255,255,0.055);
    --mcc-sidebar-active-bg:     rgba(176,128,48,0.14);
    --mcc-sidebar-active-color:  #d4a042;
    --mcc-sidebar-active-border: #c99a40;
    --mcc-sidebar-section-color: rgba(255,255,255,0.28);

    /* ── Gradient tokens (dark overrides) ───────────── */
    --mcc-gradient-gold:        linear-gradient(135deg, #d4a042, #e8b840);
    --mcc-gradient-purple-blue: linear-gradient(135deg, #9060e0, #5090ff);

    /* ── Callout / info-box tokens (dark) ───────────── */
    --mcc-callout-info-bg:        rgba(125, 184, 247, 0.09);
    --mcc-callout-info-border:    rgba(125, 184, 247, 0.25);
    --mcc-callout-success-bg:     rgba(93, 186, 138, 0.10);
    --mcc-callout-success-border: rgba(93, 186, 138, 0.28);
    --mcc-callout-warning-bg:     rgba(255, 193, 7, 0.10);
    --mcc-callout-warning-border: rgba(255, 193, 7, 0.28);

    /* ── Structural tokens (dark) ────────────────────── */
    --mcc-divider-subtle: rgba(255, 255, 255, 0.08);

    /* ── Achievement toast tokens (dark) ─────────────── */
    --mcc-toast-achievement-bg:    rgba(255, 193, 7, 0.10);
    --mcc-toast-achievement-color: #e0a030;

    /* ── Strike-type pill tokens (dark) ─────────────── */
    --mcc-pill-circ-bg:            rgba(210, 145,  40, 0.18);
    --mcc-pill-circ-color:         #dda030;
    --mcc-pill-circ-border:        rgba(210, 145,  40, 0.38);
    --mcc-pill-circ-hover-bg:      rgba(210, 145,  40, 0.28);
    --mcc-pill-circ-hover-border:  rgba(210, 145,  40, 0.55);
    --mcc-pill-circ-active-bg:     rgba(210, 145,  40, 0.34);
    --mcc-pill-circ-active-color:  #f0b840;
    --mcc-pill-circ-active-border: #c09030;

    --mcc-pill-proof-bg:            rgba(140, 100, 255, 0.18);
    --mcc-pill-proof-color:         #b090ff;
    --mcc-pill-proof-border:        rgba(140, 100, 255, 0.38);
    --mcc-pill-proof-hover-bg:      rgba(140, 100, 255, 0.28);
    --mcc-pill-proof-hover-border:  rgba(140, 100, 255, 0.55);
    --mcc-pill-proof-active-bg:     rgba(140, 100, 255, 0.32);
    --mcc-pill-proof-active-color:  #c8aaff;
    --mcc-pill-proof-active-border: #8060e0;

    --mcc-pill-spec-bg:            rgba( 30, 200, 190, 0.18);
    --mcc-pill-spec-color:         #25d0c8;
    --mcc-pill-spec-border:        rgba( 30, 200, 190, 0.38);
    --mcc-pill-spec-hover-bg:      rgba( 30, 200, 190, 0.28);
    --mcc-pill-spec-hover-border:  rgba( 30, 200, 190, 0.55);
    --mcc-pill-spec-active-bg:     rgba( 30, 200, 190, 0.30);
    --mcc-pill-spec-active-color:  #30e0d8;
    --mcc-pill-spec-active-border: #18b0a8;
}

/* ── Dark mode Bootstrap utility overrides ─────────────────────────────── */
/*
 * Bootstrap utility classes (.bg-white, .bg-light, .table-light) use !important
 * and hardcode light values, so they must be explicitly overridden here.
 */

/* Generic surface utilities — remap to theme tokens */
[data-mcc-theme="dark"] .bg-white {
    background-color: var(--mcc-bg-surface) !important;
    color: var(--mcc-text) !important;
}
[data-mcc-theme="dark"] .bg-light {
    background-color: var(--mcc-bg-inset) !important;
    color: var(--mcc-text) !important;
}

/* Card headers specifically — slightly raised surface to distinguish from card body */
[data-mcc-theme="dark"] .card-header {
    background-color: var(--mcc-bg-raised) !important;
    border-bottom-color: var(--mcc-border) !important;
    color: var(--mcc-text);
}
[data-mcc-theme="dark"] .card-footer {
    background-color: var(--mcc-bg-raised) !important;
    border-top-color: var(--mcc-border) !important;
    color: var(--mcc-text-muted);
}

/* Table light headers (used on thead elements) */
[data-mcc-theme="dark"] .table-light,
[data-mcc-theme="dark"] .table-light > *,
[data-mcc-theme="dark"] .table > thead.table-light,
[data-mcc-theme="dark"] .table > thead.table-light > tr > th,
[data-mcc-theme="dark"] .table > thead.table-light > tr > td {
    --bs-table-bg: var(--mcc-bg-raised);
    --bs-table-color: var(--mcc-text-muted);
    --bs-table-border-color: var(--mcc-border);
    background-color: var(--mcc-bg-raised) !important;
    color: var(--mcc-text-muted) !important;
    border-color: var(--mcc-border) !important;
}

/* DataTables — the library doesn't know about our theme; target thead directly */
[data-mcc-theme="dark"] table.dataTable thead > tr > th,
[data-mcc-theme="dark"] table.dataTable thead > tr > td {
    background-color: var(--mcc-bg-raised);
    color: var(--mcc-text-muted);
    border-bottom-color: var(--mcc-border);
}
[data-mcc-theme="dark"] table.dataTable tfoot > tr > th,
[data-mcc-theme="dark"] table.dataTable tfoot > tr > td {
    background-color: var(--mcc-bg-raised);
    color: var(--mcc-text-muted);
    border-top-color: var(--mcc-border);
}
/* DataTables sort arrows — keep them visible on dark bg */
[data-mcc-theme="dark"] table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before,
[data-mcc-theme="dark"] table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after,
[data-mcc-theme="dark"] table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
[data-mcc-theme="dark"] table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after {
    opacity: 0.7;
}

/* ── Dark mode Bootstrap component corrections ─────────────────────────── */

/* Bootstrap's dark input bg is too cold — warm it up */
[data-mcc-theme="dark"] .form-control,
[data-mcc-theme="dark"] .form-select,
[data-mcc-theme="dark"] .input-group-text {
    background-color: var(--mcc-bg-inset);
    border-color: var(--mcc-border);
    color: var(--mcc-text);
}
[data-mcc-theme="dark"] .form-control:focus,
[data-mcc-theme="dark"] .form-select:focus {
    background-color: var(--mcc-bg-inset);
    border-color: var(--mcc-gold-border);
    box-shadow: 0 0 0 0.18rem var(--mcc-gold-subtle);
    color: var(--mcc-text);
}
[data-mcc-theme="dark"] .form-control::placeholder {
    color: var(--mcc-text-dim);
}

/* Bootstrap dropdown in dark */
[data-mcc-theme="dark"] .dropdown-menu {
    --bs-dropdown-bg: var(--mcc-bg-surface);
    --bs-dropdown-border-color: var(--mcc-border);
    --bs-dropdown-link-color: var(--mcc-text);
    --bs-dropdown-link-hover-bg: var(--mcc-hover-tint);
    --bs-dropdown-link-active-bg: var(--mcc-gold-subtle);
    --bs-dropdown-link-active-color: var(--mcc-gold);
    box-shadow: var(--mcc-shadow-modal);
}

/* Badge / alert warm corrections in dark */
[data-mcc-theme="dark"] .alert-warning {
    --bs-alert-bg: rgba(212, 160, 66, 0.12);
    --bs-alert-border-color: rgba(212, 160, 66, 0.28);
    --bs-alert-color: rgba(255, 220, 140, 0.92);
}

/* Bootstrap table in dark */
[data-mcc-theme="dark"] .table {
    --bs-table-striped-bg: rgba(255,255,255,0.025);
    --bs-table-hover-bg: rgba(255,255,255,0.04);
    --bs-table-border-color: var(--mcc-border);
}

/* Progress bars in dark */
[data-mcc-theme="dark"] .progress {
    background-color: var(--mcc-bg-inset);
}

/* Modal backdrop — much more opaque in dark so the modal lifts clearly off the page */
[data-mcc-theme="dark"] .modal-backdrop {
    --bs-backdrop-opacity: 0.82;
}

/* Modal content — outlined ring + deep shadow for dark */
[data-mcc-theme="dark"] .modal-content {
    border-color: rgba(255, 255, 255, 0.13);
    box-shadow: var(--mcc-shadow-modal);
}