/* ── CSS custom properties ─────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-app:        #f0f0f0;
  --bg-surface:    #fff;
  --bg-subtle:     #fafafa;
  --bg-muted:      #ebebeb;
  --bg-nav-hover:  #e8e8e8;
  --bg-accent-tint:#e8f0fe;
  /* Text */
  --text-strong:    #222;
  --text-secondary: #555;
  --text-tertiary:  #666;
  --text-muted:     #777;
  --text-faint:     #aaa;
  --text-disabled:  #bbb;
  /* Borders */
  --border-default:    #ccc;
  --border-subtle:     #e0e0e0;
  --border-faint:      #eee;
  --border-very-faint: #f2f2f2;
  /* Accent */
  --accent:       #1a73e8;
  --accent-hover: #1558b0;
  --accent-light: #7baaf7;
  /* Danger */
  --danger:        #c0392b;
  --danger-hover:  #a93226;
  --danger-warn:   #c62828;
  --danger-error:  #b71c1c;
  --danger-bg:     #fff0ef;
  --danger-border: #e0a0a0;
  /* Success */
  --success:      #2e7d32;
  --success-bg:   #d4edda;
  --success-text: #155724;
  /* Code / Log */
  --code-bg:    #f4f4f4;
  --code-text:  #333;
  --log-bg:     #1c1c1e;
  --log-text:   #bbb;
  --log-border: #303034;
  /* Shadows */
  --shadow-card:  0 10px 24px rgba(18,18,20,0.04);
  --shadow-modal: 0 12px 48px rgba(0,0,0,0.18);
  --shadow-focus: 0 0 0 3px rgba(26,115,232,0.12);
  /* Misc */
  --backdrop:     rgba(0,0,0,0.3);
  --grid-line:    rgba(0,0,0,0.03);
  --preview-meta: #8a8a8a;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg-app:        #131313;
  --bg-surface:    #1e1e1e;
  --bg-subtle:     #262626;
  --bg-muted:      #2e2e2e;
  --bg-nav-hover:  #2a2a2a;
  --bg-accent-tint:#1e2f4a;
  --text-strong:    #e8e8e8;
  --text-secondary: #b5b5b5;
  --text-tertiary:  #999;
  --text-muted:     #888;
  --text-faint:     #5a5a5a;
  --text-disabled:  #444;
  --border-default:    #3a3a3a;
  --border-subtle:     #2a2a2a;
  --border-faint:      #2d2d2d;
  --border-very-faint: #232323;
  --accent:       #3b82f6;
  --accent-hover: #60a5fa;
  --accent-light: #64b5f6;
  --danger:        #ef5350;
  --danger-hover:  #f0685f;
  --danger-warn:   #f0685f;
  --danger-error:  #e57373;
  --danger-bg:     #3a1f1f;
  --danger-border: #7a3a3a;
  --success:      #6fcf76;
  --success-bg:   #1e3a1e;
  --success-text: #6fcf76;
  --code-bg:    #2a2a2a;
  --code-text:  #d8d8d8;
  --log-bg:     #000;
  --log-text:   #ccc;
  --log-border: #1a1a1a;
  --shadow-card:  0 10px 24px rgba(0,0,0,0.4);
  --shadow-modal: 0 12px 48px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(59,130,246,0.2);
  --backdrop:     rgba(0,0,0,0.6);
  --grid-line:    rgba(255,255,255,0.05);
  --preview-meta: #888;
  color-scheme: dark;
}

/* ── Base reset ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg-app); color: var(--text-strong); }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
nav { display: flex; gap: 4px; margin-bottom: 20px; }
nav a { padding: 5px 12px; border-radius: 6px; font-size: 0.82rem; text-decoration: none; color: var(--text-secondary); border: 1px solid transparent; }
nav a:hover { background: var(--bg-nav-hover); }
nav a.active { background: var(--bg-surface); border-color: var(--border-subtle); color: var(--text-strong); font-weight: 500; }

/* ── Typography ────────────────────────────────────────────────────────────── */
h1 { font-size: 1.25rem; font-weight: 600; margin-bottom: 18px; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
button { padding: 6px 14px; border: 1px solid var(--border-default); border-radius: 6px; background: var(--bg-surface); cursor: pointer; font-size: 0.85rem; white-space: nowrap; color: var(--text-strong); }
button:hover:not(:disabled) { background: var(--bg-muted); }
button:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--danger-bg); }
.btn-sm { padding: 3px 10px; font-size: 0.78rem; }

/* ── Theme toggle ──────────────────────────────────────────────────────────── */
.theme-toggle { margin-left: auto; padding: 5px 10px; font-size: 1rem; line-height: 1; }
[data-theme="light"] .theme-toggle { background: #ddd; color: #fff; border-color: #ddd; }
[data-theme="light"] .theme-toggle:hover { background: #ccc; border-color: #ccc; }
[data-theme="dark"]  .theme-toggle { background: #333; color: #fff; border-color: #333; }
[data-theme="dark"]  .theme-toggle:hover { background: #444; border-color: #444; }