/* =========================================
   CSS COMPATIBILITY BRIDGE v3
   Maps all legacy variables to theme.css tokens
   Load AFTER theme.css, BEFORE page stylesheets
   ========================================= */

:root {

  /* ─────────────────────────────────────────
     FROM style.css (legacy portal vars)
     ───────────────────────────────────────── */
  --bg:            var(--bg-darkest);
  --accent:        var(--primary);
  --accent-sec:    var(--secondary);
  --accent-glow:   var(--glow-primary);
  --text-pri:      var(--text-primary);
  --text-sec:      var(--text-secondary);
  --dock-bg:       var(--glass-heavy);

  /* ─────────────────────────────────────────
     FROM calculate.css (neon vars)
     ───────────────────────────────────────── */
  --bg-dark:       var(--bg-darkest);
  --neon-ungu:     #c026d3;
  --neon-biru:     #2563eb;
  --neon-cyan:     var(--tertiary);
  --neon-oren:     var(--secondary);
  --neon-lime:     var(--accent-green-bright);
  --glass-bg:      var(--glass);
  --glass-blur:    var(--blur-md);
  --shadow-card:   var(--shadow-xl);
  --glow-text:     0 0 10px rgba(192, 38, 211, 0.5);

  /* ─────────────────────────────────────────
     FROM mind.html (custom vars)
     ───────────────────────────────────────── */
  --bg-deep:       var(--bg-void);
  --bg-surface:    var(--bg-surface);
  --text-main:     var(--text-primary);
  --text-muted-old: var(--text-secondary);

  /* ─────────────────────────────────────────
     FROM library.html (custom vars)
     ───────────────────────────────────────── */
  --bg-void:       var(--bg-void);
  --cyan:          var(--tertiary);
  --red:           var(--accent-red);
  --green:         var(--accent-green);
  --gold:          var(--accent-gold);

  /* ─────────────────────────────────────────
     STATUS COLORS (legacy names)
     ───────────────────────────────────────── */
  --primary-color:   var(--primary);
  --secondary-color: var(--secondary);
  --danger:          var(--accent-red);
  --success:         var(--accent-green);
  --warning:         var(--accent-gold);
  --info:            var(--tertiary);

  /* ─────────────────────────────────────────
     LEGACY SPACING (direct values for compat)
     ───────────────────────────────────────── */
  --gap-sm:   8px;
  --gap-md:   16px;
  --gap-lg:   24px;
  --gap-xl:   32px;
}

/* ─── Light mode bridge ─── */
[data-theme="light"] {
  --bg:       var(--bg-light);
  --text-pri: var(--text-primary-light);
  --text-sec: var(--text-secondary-light);
}

/* =========================================
   GLASS EFFECT NORMALIZATION
   ========================================= */

/* All glass classes use the same system */
.glass,
.glass-card,
.glass-nav,
.glass-panel,
.glass-surface,
[class*="glass-"] {
  background: var(--glass);
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
  border: 1px solid var(--glass-border);
}

[data-theme="light"] .glass,
[data-theme="light"] .glass-card,
[data-theme="light"] .glass-nav,
[data-theme="light"] .glass-panel,
[data-theme="light"] [class*="glass-"] {
  background: var(--glass-light);
  border-color: var(--glass-border-light);
}

/* Heavy glass (modals, dropdowns) */
.glass-heavy {
  background: var(--glass-heavy) !important;
  backdrop-filter: var(--blur-lg);
  -webkit-backdrop-filter: var(--blur-lg);
}

/* =========================================
   BUTTON NORMALIZATION
   ========================================= */

/* Unclassed buttons get primary style */
button:not([class*="btn"]):not([class*="tool"]):not([class*="dock"]):not([class*="menu"]):not([class*="fab"]):not([class*="nav"]),
input[type="button"],
input[type="submit"] {
  padding: var(--sp-2) var(--sp-6);
  background: var(--grad-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--trans-normal);
  box-shadow: 0 4px 15px var(--glow-primary-sm);
}

button:not([class*="btn"]):not([class*="tool"]):not([class*="dock"]):not([class*="menu"]):not([class*="fab"]):not([class*="nav"]):hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--glow-primary);
  filter: brightness(1.08);
}

/* =========================================
   INPUT NORMALIZATION
   ========================================= */

input:not([type="button"]):not([type="submit"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: var(--font-sans);
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
}

input:not([type="button"]):not([type="submit"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--glow-primary-sm);
  background: rgba(168, 85, 247, 0.06);
}

[data-theme="light"] input:not([type="button"]):not([type="submit"]):not([type="range"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: rgba(0, 0, 0, 0.04);
  border-color: var(--glass-border-light);
  color: var(--text-primary-light);
}

/* =========================================
   COLOR SCHEME
   ========================================= */

html {
  color-scheme: dark light;
}

[data-theme="light"] {
  color-scheme: light dark;
}

/* =========================================
   SCROLL BEHAVIOR
   ========================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Account for fixed headers */
}

/* =========================================
   RESPONSIVE ROOT SCALING
   ========================================= */

@media (max-width: 768px) {
  :root { font-size: 15px; }
}

@media (max-width: 480px) {
  :root { font-size: 14px; }
}

@media (max-width: 360px) {
  :root { font-size: 13px; }
}

/* =========================================
   PRINT STYLES
   ========================================= */

@media print {
  .fab-container, .settings-btn, .corner-brand,
  .bottom-dock, #backToTop, #toast-container,
  .announcement-bar, .progress-container {
    display: none !important;
  }
  body { background: white; color: black; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}