/* ─────────────────────────────────────────────────────────────────────────── */
/*  DLS Shared Styles — Light Mode, Toggle Controls & Font Toggle            */
/*  Imported by all DLS pages                                                */
/* ─────────────────────────────────────────────────────────────────────────── */

/* ── Light mode overrides ──────────────────────────────────────────────── */
html.light {
  --vl-life:         oklch(0.50 0.22 145);
  --vl-life-soft:    oklch(0.65 0.15 145);
  --vl-virtual:      oklch(0.48 0.24 300);
  --vl-virtual-soft: oklch(0.60 0.18 300);
  --vl-bridge:       oklch(0.48 0.22 220);
  --vl-bridge-soft:  oklch(0.60 0.15 220);
  --vl-accent-warm:  oklch(0.58 0.22 340);

  --surface-0: oklch(0.97 0.005 265);
  --surface-1: oklch(0.94 0.018 272);
  --surface-2: oklch(0.90 0.010 260);
  --surface-3: oklch(0.86 0.012 261);
  --surface-glass: oklch(1 0 0 / 0.60);

  --text-primary:   oklch(0.18 0.04 265);
  --text-secondary: oklch(0.40 0.04 257);
  --text-muted:     oklch(0.55 0.03 257);

  --border-default: oklch(0 0 0 / 0.12);
  --border-subtle:  oklch(0 0 0 / 0.07);
  --border-strong:  oklch(0 0 0 / 0.22);

  --shadow-sm: 0 1px 2px oklch(0 0 0 / 0.06);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.08);

  --primary:      oklch(0.52 0.20 277);
  --primary-fg:   oklch(0.98 0.003 248);
  --secondary:    oklch(0.90 0.010 260);
  --secondary-fg: oklch(0.18 0.04 265);
  --destructive:  oklch(0.55 0.22 25);
  --muted:        oklch(0.94 0.008 260);
  --muted-fg:     oklch(0.40 0.04 257);
  --accent:       oklch(0.92 0.008 260);
  --accent-fg:    oklch(0.18 0.04 265);
  --input-border: oklch(0.78 0.015 257);
  --ring:         oklch(0.52 0.20 277);
  --card-bg:      oklch(0.95 0.005 265);
  --success:      oklch(0.45 0.18 150);
  --warning:      oklch(0.65 0.18 84);
}

/* ── Floating control panel ────────────────────────────────────────────── */
.dls-controls {
  position: fixed;
  top: 16px;
  right: 24px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--border-default);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
  user-select: none;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.control-label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  min-width: 44px;
}

/* ── Toggle switch (pill style) ────────────────────────────────────────── */
.toggle-track {
  width: 36px;
  height: 20px;
  border-radius: 9999px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.toggle-track.on {
  background: var(--vl-virtual);
}

.toggle-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px oklch(0 0 0 / 0.25);
}

.toggle-track.on .toggle-thumb {
  transform: translateX(16px);
}

/* ── Font: TT Rounds Neue (variable trial) ────────────────────────────── */
@font-face {
  font-family: 'TT Rounds Neue';
  src: url('fonts/TT-Rounds-Neue-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: 'TT Rounds Neue', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── Code blocks in light mode ─────────────────────────────────────────── */
html.light code {
  background: oklch(0.92 0.008 260);
  color: oklch(0.48 0.24 300);
}

html.light pre.code-block {
  background: oklch(0.95 0.005 265);
  border-color: var(--border-default);
}

html.light .tailwind-class {
  background: oklch(0.50 0.22 145 / 0.10);
  color: oklch(0.40 0.18 145);
}

html.light .note {
  background: oklch(0.48 0.22 220 / 0.06);
}

html.light .card {
  background: oklch(1 0 0 / 0.65);
  border-color: oklch(0 0 0 / 0.10);
}

html.light .demo-area.glass-bg {
  background:
    radial-gradient(ellipse 80% 60% at 30% 70%, oklch(0.48 0.24 300 / 0.04), transparent),
    radial-gradient(ellipse 60% 50% at 70% 30%, oklch(0.50 0.22 145 / 0.03), transparent),
    var(--surface-1);
}

html.light .toast {
  background: var(--card-bg);
  border-color: var(--input-border);
}

/* ── Glass demo light mode ─────────────────────────────────────────────── */
html.light .glass-demo .bg-layer {
  background:
    linear-gradient(135deg,
      oklch(0.90 0.025 270) 0%,
      oklch(0.88 0.030 285) 40%,
      oklch(0.92 0.020 240) 100%
    );
}

html.light .glass-demo .wavy-layer {
  mix-blend-mode: multiply;
  opacity: 0.5;
}

html.light .glass-panel {
  background: oklch(1 0 0 / 0.55);
  border-color: oklch(0 0 0 / 0.10);
  color: var(--text-primary);
}

html.light .glass-panel h5 {
  color: var(--text-primary);
}

html.light .glass-panel p {
  color: var(--text-secondary);
}

html.light .glass-panel .glass-label {
  color: var(--vl-virtual);
}

html.light .glass-panel.glass-heavy {
  color: oklch(0.97 0.003 248);
  border-color: oklch(0 0 0 / 0.12);
}

html.light .glass-panel.glass-heavy p {
  color: oklch(0.90 0.010 260);
}

html.light .glass-panel.glass-heavy .glass-label {
  color: oklch(0.48 0.24 300);
}

/* ── DLS page elements in light mode ───────────────────────────────────── */
html.light .dls-sidebar {
  background: oklch(0.95 0.022 272);
  border-right-color: oklch(0 0 0 / 0.08);
}

html.light .dls-sidebar a:hover {
  color: var(--text-primary);
  background: oklch(0 0 0 / 0.05);
}

html.light .dls-sidebar a.active {
  color: var(--text-primary);
  background: oklch(0.52 0.20 277 / 0.08);
  border-left-color: var(--vl-virtual);
}

html.light .hero,
html.light .page-header {
  background: oklch(0.96 0.020 270);
}

html.light .principle-card,
html.light .nav-card,
html.light .font-showcase {
  background: oklch(1 0 0 / 0.70);
  border-color: oklch(0 0 0 / 0.08);
  backdrop-filter: blur(8px);
}

html.light .swatch-info {
  background: oklch(0.97 0.005 265);
}

html.light .token-table td {
  border-bottom-color: oklch(0 0 0 / 0.06);
}

html.light .token-table th {
  border-bottom-color: oklch(0 0 0 / 0.15);
}

html.light .wavy-divider {
  opacity: 0.5;
}

html.light .dls-footer {
  border-top-color: oklch(0 0 0 / 0.08);
}

html.light .pill.life {
  background: oklch(0.50 0.22 145 / 0.10);
  color: oklch(0.40 0.18 145);
}

html.light .pill.virtual {
  background: oklch(0.48 0.24 300 / 0.10);
  color: oklch(0.38 0.20 300);
}

html.light .pill.bridge {
  background: oklch(0.48 0.22 220 / 0.10);
  color: oklch(0.38 0.18 220);
}

html.light .page-mock {
  background: oklch(0.95 0.005 265);
  border-color: oklch(0 0 0 / 0.10);
}

html.light ::-webkit-scrollbar-thumb {
  background: oklch(0.40 0.04 257 / 0.3);
}

.dls-sidebar .nav-sublist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 12px;
  padding-left: 18px;
  border-left: 1px solid var(--border-default);
}

.dls-sidebar a.sub-link {
  padding: calc(var(--space-2) - 2px) var(--space-6);
  padding-left: calc(var(--space-6) + 12px);
  font-size: 0.75rem;
  color: var(--text-muted);
}

.dls-sidebar a.sub-link:hover {
  color: var(--text-secondary);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .dls-controls {
    top: auto;
    bottom: 16px;
    right: 16px;
  }
}