/* ═══════════════════════════════════════════════════════════════════════════
   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);

    /* ── 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);

    /* ── 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);
}

/* ═══════════════════════════════════════════════════════════════════════════
   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);

    /* ── 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);
}

/* ── 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);
}