/* ───────────────────────────────────────────────
   Memory System — Design System (Theme)
   Dark & Light themes via CSS custom properties
   ─────────────────────────────────────────────── */

/* ── Default: Dark ── */
:root,
body[data-theme="dark"] {
  /* Backgrounds */
  --color-bg:              #0d1117;
  --color-bg-secondary:    #161b22;
  --color-bg-tertiary:     #1c2128;
  --color-bg-elevated:     #21262d;
  --color-sidebar-bg:      var(--color-bg-secondary);
  --color-topbar-bg:       var(--color-bg-secondary);

  /* Borders */
  --color-border:          #21262d;
  --color-border-secondary:#30363d;
  --color-border-accent:   #58a6ff;

  /* Text */
  --color-text:            #c9d1d9;
  --color-text-heading:    #e6edf3;
  --color-text-muted:      #8b949e;
  --color-text-dim:        #484f58;
  --color-text-inverse:    #0d1117;

  /* Accent */
  --color-accent:          #58a6ff;
  --color-accent-hover:    #79c0ff;
  --color-accent-subtle:   rgba(88, 166, 255, 0.08);

  /* Semantic */
  --color-success:         #238636;
  --color-success-hover:   #2ea043;
  --color-danger:          #da3633;
  --color-danger-hover:    #f85149;
  --color-warning:         #d29922;

  /* Interactive */
  --color-btn-bg:          #21262d;
  --color-btn-border:      var(--color-border-secondary);
  --color-btn-hover:       #30363d;
  --color-btn-active:      #1f6feb;
  --color-btn-text:        var(--color-text);

  /* Link / Nav */
  --color-link:            #8b949e;
  --color-link-hover:      #e6edf3;
  --color-link-active:     #e6edf3;
  --color-nav-indicator:   #58a6ff;

  /* Shadows */
  --shadow-sm:             0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.55);

  /* Radii */
  --radius-sm:             4px;
  --radius-md:             6px;
  --radius-lg:             8px;
  --radius-xl:             12px;

  /* Typography */
  --font-sans:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:             ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* Transitions */
  --transition-fast:       0.15s ease;
  --transition-base:       0.2s ease;
  --transition-slow:       0.35s ease;
}

/* ── Light ── */
body[data-theme="light"] {
  --color-bg:              #ffffff;
  --color-bg-secondary:    #f6f8fa;
  --color-bg-tertiary:     #f3f4f6;
  --color-bg-elevated:     #eaeef2;
  --color-sidebar-bg:      var(--color-bg-secondary);
  --color-topbar-bg:       var(--color-bg-secondary);

  --color-border:          #d0d7de;
  --color-border-secondary:#afb8c1;
  --color-border-accent:   #0969da;

  --color-text:            #24292f;
  --color-text-heading:    #1f2328;
  --color-text-muted:      #656d76;
  --color-text-dim:        #8c959f;
  --color-text-inverse:    #ffffff;

  --color-accent:          #0969da;
  --color-accent-hover:    #0550ae;
  --color-accent-subtle:   rgba(9, 105, 218, 0.06);

  --color-success:         #1a7f37;
  --color-success-hover:   #26a148;
  --color-danger:          #cf222e;
  --color-danger-hover:    #d1242f;
  --color-warning:         #9a6700;

  --color-btn-bg:          #f6f8fa;
  --color-btn-border:      var(--color-border);
  --color-btn-hover:       #eaeef2;
  --color-btn-active:      #0969da;
  --color-btn-text:        var(--color-text);

  --color-link:            #656d76;
  --color-link-hover:      #1f2328;
  --color-link-active:     #1f2328;
  --color-nav-indicator:   #0969da;

  --shadow-sm:             0 1px 2px rgba(31, 35, 40, 0.08);
  --shadow-md:             0 3px 8px rgba(31, 35, 40, 0.1);
  --shadow-lg:             0 8px 24px rgba(31, 35, 40, 0.14);
}

/* ── Smooth theme transition ── */
html, body, body * {
  transition:
    background-color var(--transition-slow),
    border-color    var(--transition-slow),
    color           var(--transition-slow),
    box-shadow      var(--transition-slow);
}

/* Exclude elements where transition ruins UX */
body *:not(input):not(textarea):not(select):not(button):not(.no-theme-transition) {
  /* inherits above transition */
}

/* ── Theme toggle button ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin: 4px 12px;
  background: var(--color-btn-bg);
  border: 1px solid var(--color-btn-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover {
  color: var(--color-text);
  background: var(--color-btn-hover);
  border-color: var(--color-accent);
}
.theme-toggle .icon {
  font-size: 15px;
  line-height: 1;
}