/* Theme + density + accent variants */

/* Accent variants */
html[data-accent="indigo"] {
  --accent:      oklch(0.50 0.15 270);
  --accent-2:    oklch(0.62 0.13 270);
  --accent-soft: oklch(0.95 0.04 270);
  --accent-ink:  oklch(0.32 0.13 270);
}
html[data-accent="teal"] {
  --accent:      oklch(0.58 0.10 200);
  --accent-2:    oklch(0.68 0.09 200);
  --accent-soft: oklch(0.94 0.04 200);
  --accent-ink:  oklch(0.34 0.10 200);
}

/* Ink (dark) theme */
html[data-theme="ink"] {
  --paper:      oklch(0.20 0.01 250);
  --paper-2:    oklch(0.24 0.012 250);
  --paper-3:    oklch(0.28 0.014 250);
  --line:       oklch(0.34 0.014 250);
  --line-soft:  oklch(0.30 0.012 250);
  --ink:        oklch(0.94 0.005 250);
  --ink-2:      oklch(0.78 0.006 250);
  --ink-3:      oklch(0.62 0.008 250);
  --ink-mute:   oklch(0.50 0.008 250);

  --kw:         oklch(0.78 0.13 280);
  --string:     oklch(0.78 0.10 145);
  --num:        oklch(0.78 0.13 60);
  --comment:    oklch(0.55 0.012 250);
  --punct:      oklch(0.70 0.010 250);
}
html[data-theme="ink"] .brand-mark { background: var(--paper); color: var(--ink); }
html[data-theme="ink"] .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
html[data-theme="ink"] .btn-primary:hover { background: var(--accent-2); }
html[data-theme="ink"] .step-pill { background: var(--accent); color: var(--paper); }
html[data-theme="ink"] .step-done .step-dot { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* Terminal theme — green-on-black, monospace heavy */
html[data-theme="terminal"] {
  --paper:      oklch(0.16 0.01 150);
  --paper-2:    oklch(0.20 0.012 150);
  --paper-3:    oklch(0.24 0.014 150);
  --line:       oklch(0.32 0.014 150);
  --line-soft:  oklch(0.28 0.012 150);
  --ink:        oklch(0.92 0.10 145);
  --ink-2:      oklch(0.78 0.08 145);
  --ink-3:      oklch(0.62 0.06 145);
  --ink-mute:   oklch(0.50 0.04 145);

  --accent:     oklch(0.85 0.18 110);
  --accent-2:   oklch(0.90 0.16 110);
  --accent-soft: oklch(0.30 0.10 145);
  --accent-ink: oklch(0.92 0.18 110);

  --kw:         oklch(0.85 0.18 110);
  --string:     oklch(0.85 0.10 60);
  --num:        oklch(0.85 0.14 30);
  --comment:    oklch(0.50 0.04 145);
  --punct:      oklch(0.70 0.06 145);
  --font-sans:  var(--font-mono);
}
html[data-theme="terminal"] .stepper-title { font-family: var(--font-mono); font-size: 16px; }
html[data-theme="terminal"] .brand-mark { background: var(--accent); color: var(--paper); }
html[data-theme="terminal"] .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
html[data-theme="terminal"] .step-pill { background: var(--accent); color: var(--paper); }

/* Density */
html[data-density="compact"] {
  --r-md: 4px;
  --r-lg: 6px;
}
html[data-density="compact"] body { font-size: 12px; }
html[data-density="compact"] .pane-header { padding: 6px 12px; min-height: 32px; }
html[data-density="compact"] .rail-item { padding: 7px 10px 9px; min-height: 52px; }
html[data-density="compact"] .schema-table-head { padding: 5px 12px; }
html[data-density="compact"] .schema-col { padding: 3px 12px 3px 32px; }
html[data-density="compact"] .lesson-stepper { padding: 10px 14px 12px; gap: 8px; }
html[data-density="compact"] .stepper-title { font-size: 18px; }
html[data-density="compact"] .step-card { padding: 10px 12px; }
html[data-density="compact"] .editor-toolbar { padding: 6px 12px; }
html[data-density="compact"] .result-table th,
html[data-density="compact"] .result-table td { padding: 4px 10px; }