/* ================================
   Kahlonetrics — Canonical Theme
   Shared across all services
   ================================ */

/* ---------- Dark (default) ---------- */
:root {
    /* Core surfaces */
    --color-background:     #0d0d14;
    --color-surface:        #151923;
    --color-surface-alt:    #1a1a24;
    --color-surface-subtle: #1e1e23;
    --color-surface-input:  #08080c;

    /* Text */
    --color-text:           #fefefd;
    --color-text-secondary: rgba(255, 255, 255, 0.9);
    --color-text-muted:     rgba(255, 255, 255, 0.5);

    /* Accent */
    --color-accent:         #e94560;
    --color-accent-hover:   #d63851;
    --color-accent-bg:      rgba(233, 69, 96, 0.3);
    --color-on-accent:      #fefefd;

    /* Tiles / cards */
    --color-tile-bg:        rgba(255, 255, 255, 0.1);
    --color-tile-bg-hover:  rgba(255, 255, 255, 0.2);
    --color-tile-border:    rgba(255, 255, 255, 0.2);

    /* Semantic */
    --color-success:        #48bb78;
    --color-success-surface:#14281e;
    --color-warning:        #f6ad55;
    --color-error:          #fc8181;
    --color-info:           #60A5FA;

    /* Overlay / shadow */
    --color-overlay:        rgba(0, 0, 0, 0.7);
    --color-shadow:         rgba(0, 0, 0, 0.4);

    /* Scrollbar */
    --scrollbar-thumb:      rgba(255, 255, 255, 0.4);
    --scrollbar-track:      rgba(255, 255, 255, 0.05);

    /* ---- Charts (Plotly / clientside) ---- */
    --chart-base:           rgba(100, 140, 240, 0.7);
    --chart-hover:          #e94560;
    --chart-font:           rgba(220, 220, 220, 0.9);
    --chart-axis:           rgba(180, 180, 200, 0.7);
    --chart-grid:           rgba(255, 255, 255, 0.06);
    --chart-annotation:     rgba(220, 220, 220, 0.85);
    --chart-legend:         rgba(200, 200, 220, 0.8);
    --chart-table-header:   rgba(20, 25, 35, 0.9);
    --chart-table-cell:     rgba(15, 17, 21, 0.8);
    --chart-table-font:     rgba(200, 200, 210, 0.85);
    --chart-table-line:     rgba(255, 255, 255, 0.06);

    /* Glass (contrast tint at various opacities — white in dark, black in light) */
    --glass-4:  rgba(255, 255, 255, 0.04);
    --glass-5:  rgba(255, 255, 255, 0.05);
    --glass-6:  rgba(255, 255, 255, 0.06);
    --glass-8:  rgba(255, 255, 255, 0.08);
    --glass-10: rgba(255, 255, 255, 0.10);
    --glass-12: rgba(255, 255, 255, 0.12);
    --glass-15: rgba(255, 255, 255, 0.15);
    --glass-20: rgba(255, 255, 255, 0.20);
    --glass-25: rgba(255, 255, 255, 0.25);

    /* ---- Dashboard aliases ---- */
    --bg:    var(--color-background);
    --dashboard-bg:    var(--color-background);
    --dashboard-frame: rgba(255, 255, 255, 0.06);
    --dashboard-tile:  rgba(225, 255, 255, 0.02);
    --panel: var(--color-surface);
    --txt:   var(--color-text);
    --muted: var(--color-text-muted);
    --shadow: none;
    --radius: 16px;
    --page-gutter: 20px;
    --fullscreen-padding: 4px;

    /* Tabs */
    --tab-bg:          rgba(0, 0, 0, 0.2);
    --tab-text:        rgba(255, 255, 255, 0.5);
    --tab-border:      rgba(255, 255, 255, 0.18);
    --tab-active-bg:   rgba(0, 0, 0, 0.2);
    --tab-active-text: #fefefd;
    --tab-hover-bg:    #e94560;
    --tab-hover-text:  #fefefd;
    --tab-height:      44px;
    --tab-hpad:        18px;
    --tab-font:        16px;

    /* Dash 4 overrides */
    --Dash-Fill-Interactive-Strong: #e94560;
    --Dash-Fill-Inverse-Strong:    rgba(255, 255, 255, 0.04);
    --Dash-Stroke-Strong:          rgba(255, 255, 255, 0.12);
    --Dash-Text-Strong:            #fefefd;

    /* ---- Explorer-specific ---- */
    --explorer-bg-primary:      var(--color-background);
    --explorer-bg-secondary:    var(--color-surface-input);
    --explorer-bg-tertiary:     #12121a;
    --explorer-border-subtle:   var(--color-tile-border);
    --explorer-hover-light:     rgba(255, 255, 255, 0.06);
    --explorer-hover-medium:    rgba(255, 255, 255, 0.1);
    --explorer-accent-hover:    rgba(233, 69, 96, 0.1);
    --explorer-accent-selected: rgba(233, 69, 96, 0.15);
    --explorer-accent-active:   rgba(233, 69, 96, 0.2);
    --explorer-error-hover:     rgba(252, 129, 129, 0.1);
    --explorer-overlay-bg:      rgba(13, 13, 20, 0.8);
    --explorer-shadow:          var(--color-shadow);
}

/* ---------- Light ---------- */
[data-theme="light"] {
    /* Core surfaces */
    --color-background:     #f5f5f7;
    --color-surface:        #ffffff;
    --color-surface-alt:    #f0f0f3;
    --color-surface-subtle: #e8e8ed;
    --color-surface-input:  #ffffff;

    /* Text */
    --color-text:           #1a1a2e;
    --color-text-secondary: rgba(26, 26, 46, 0.85);
    --color-text-muted:     rgba(26, 26, 46, 0.5);

    /* Accent (stays the same) */
    --color-accent:         #e94560;
    --color-accent-hover:   #d63851;
    --color-accent-bg:      rgba(233, 69, 96, 0.15);

    /* Tiles / cards */
    --color-tile-bg:        rgba(0, 0, 0, 0.04);
    --color-tile-bg-hover:  rgba(0, 0, 0, 0.08);
    --color-tile-border:    rgba(0, 0, 0, 0.12);

    /* Semantic (darker for readability on light) */
    --color-success:        #2f9e5f;
    --color-success-surface:#e8f5e9;
    --color-warning:        #d4870a;
    --color-error:          #d94452;
    --color-info:           #2563EB;

    /* Overlay / shadow */
    --color-overlay:        rgba(0, 0, 0, 0.4);
    --color-shadow:         rgba(0, 0, 0, 0.12);

    /* Scrollbar */
    --scrollbar-thumb:      rgba(0, 0, 0, 0.25);
    --scrollbar-track:      rgba(0, 0, 0, 0.05);

    /* Charts */
    --chart-base:           rgba(80, 115, 210, 0.75);
    --chart-hover:          #e94560;
    --chart-font:           rgba(30, 30, 50, 0.85);
    --chart-axis:           rgba(60, 60, 90, 0.6);
    --chart-grid:           rgba(0, 0, 0, 0.08);
    --chart-annotation:     rgba(40, 40, 60, 0.8);
    --chart-legend:         rgba(40, 40, 60, 0.7);
    --chart-table-header:   rgba(240, 240, 245, 0.95);
    --chart-table-cell:     rgba(255, 255, 255, 0.9);
    --chart-table-font:     rgba(40, 40, 60, 0.85);
    --chart-table-line:     rgba(0, 0, 0, 0.08);

    /* Dashboard aliases (auto-inherited, but shadow changes) */
    --dashboard-bg:    var(--color-background);
    --dashboard-frame: var(--color-tile-bg);
    --dashboard-tile:  var(--color-tile-bg);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

    /* Tabs */
    --tab-bg:          rgba(0, 0, 0, 0.04);
    --tab-text:        rgba(26, 26, 46, 0.5);
    --tab-border:      rgba(0, 0, 0, 0.12);
    --tab-active-bg:   rgba(255, 255, 255, 0.8);
    --tab-active-text: #1a1a2e;
    --tab-hover-bg:    #e94560;
    --tab-hover-text:  #ffffff;

    /* Dash 4 overrides */
    --Dash-Fill-Interactive-Strong: #e94560;
    --Dash-Fill-Inverse-Strong:    rgba(0, 0, 0, 0.04);
    --Dash-Stroke-Strong:          rgba(0, 0, 0, 0.12);
    --Dash-Text-Strong:            #1a1a2e;

    /* Glass */
    --glass-4:  rgba(0, 0, 0, 0.03);
    --glass-5:  rgba(0, 0, 0, 0.04);
    --glass-6:  rgba(0, 0, 0, 0.05);
    --glass-8:  rgba(0, 0, 0, 0.06);
    --glass-10: rgba(0, 0, 0, 0.08);
    --glass-12: rgba(0, 0, 0, 0.10);
    --glass-15: rgba(0, 0, 0, 0.12);
    --glass-20: rgba(0, 0, 0, 0.15);
    --glass-25: rgba(0, 0, 0, 0.20);

    /* Explorer-specific */
    --explorer-bg-tertiary:     var(--color-surface-subtle);
    --explorer-hover-light:     rgba(0, 0, 0, 0.04);
    --explorer-hover-medium:    rgba(0, 0, 0, 0.08);
    --explorer-accent-hover:    rgba(233, 69, 96, 0.08);
    --explorer-accent-selected: rgba(233, 69, 96, 0.12);
    --explorer-accent-active:   rgba(233, 69, 96, 0.15);
    --explorer-error-hover:     rgba(217, 68, 82, 0.08);
    --explorer-overlay-bg:      rgba(245, 245, 247, 0.85);
}

/* ---- Theme toggle button ---- */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}
.theme-toggle:hover {
    color: var(--color-accent);
}
/* Show sun in dark mode, moon in light mode */
.theme-icon--moon { display: none; }
[data-theme="light"] .theme-icon--sun  { display: none; }
[data-theme="light"] .theme-icon--moon { display: block; }

/* ---- Smooth transition on toggle ---- */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ---- Hide star animation in light mode ---- */
[data-theme="light"] .space-container {
    display: none;
}