:root {
  color-scheme: light;

  /* Light luxury tokens (rollback: remove this stylesheet link) */
  --tl-bg: #fafaf9;
  --tl-bg-2: #f5f5f4;
  --tl-surface: rgba(255, 255, 255, 0.88);
  --tl-surface-solid: #ffffff;
  --tl-surface-2: rgba(255, 255, 255, 0.72);
  --tl-ink: #0c0a09;
  --tl-muted: rgba(68, 64, 60, 0.86);
  --tl-border: rgba(12, 10, 9, 0.1);
  --tl-border-soft: rgba(12, 10, 9, 0.08);

  --tl-accent: #ca8a04;
  --tl-accent-2: #f3c86a;
  --tl-accent-soft: rgba(202, 138, 4, 0.12);
  --tl-accent-border: rgba(202, 138, 4, 0.2);
  --tl-accent-border-strong: rgba(202, 138, 4, 0.34);
  --tl-accent-border-active: rgba(202, 138, 4, 0.22);
  --tl-accent-glow: rgba(202, 138, 4, 0.22);
  --tl-accent-glow-strong: rgba(202, 138, 4, 0.26);

  --tl-shadow: 0 28px 70px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --tl-shadow-raise: 0 34px 88px rgba(15, 23, 42, 0.12), 0 16px 36px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --tl-shadow-nav: 0 18px 54px rgba(15, 23, 42, 0.07);
  --tl-shadow-control: 0 10px 24px rgba(15, 23, 42, 0.06);
  --tl-shadow-control-hover: 0 14px 30px rgba(15, 23, 42, 0.08);
  --tl-shadow-surface: 0 22px 54px rgba(15, 23, 42, 0.08);
  --tl-shadow-surface-hover: 0 28px 74px rgba(15, 23, 42, 0.12);

  --tl-ring: rgba(202, 138, 4, 0.18);
  --tl-ring-strong: rgba(202, 138, 4, 0.34);

  --tl-backdrop: radial-gradient(1100px 620px at 14% -6%, rgba(202, 138, 4, 0.16), transparent 62%),
    radial-gradient(980px 620px at 92% 0%, rgba(148, 163, 184, 0.22), transparent 60%),
    radial-gradient(980px 620px at 66% 112%, rgba(202, 138, 4, 0.08), transparent 55%),
    linear-gradient(180deg, var(--tl-bg) 0%, var(--tl-bg-2) 55%, var(--tl-bg) 100%);
  --tl-backdrop-grid: repeating-linear-gradient(
      0deg,
      rgba(12, 10, 9, 0.028) 0px,
      rgba(12, 10, 9, 0.028) 1px,
      transparent 1px,
      transparent 9px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(12, 10, 9, 0.022) 0px,
      rgba(12, 10, 9, 0.022) 1px,
      transparent 1px,
      transparent 11px
    ),
    radial-gradient(rgba(12, 10, 9, 0.03) 1px, transparent 1px);

  --tl-nav-bg: rgba(255, 255, 255, 0.74);
  --tl-nav-bg-solid: rgba(255, 255, 255, 0.92);

  --tl-clear: rgba(255, 255, 255, 0);
  --tl-white-22: rgba(255, 255, 255, 0.22);
  --tl-white-56: rgba(255, 255, 255, 0.56);

  --tl-white-72: rgba(255, 255, 255, 0.72);
  --tl-white-76: rgba(255, 255, 255, 0.76);
  --tl-white-78: rgba(255, 255, 255, 0.78);
  --tl-white-82: rgba(255, 255, 255, 0.82);
  --tl-white-86: rgba(255, 255, 255, 0.86);
  --tl-white-92: rgba(255, 255, 255, 0.92);
  --tl-white-65: rgba(255, 255, 255, 0.65);
  --tl-white-60: rgba(255, 255, 255, 0.6);

  --tl-ink-04: rgba(12, 10, 9, 0.04);
  --tl-ink-06: rgba(12, 10, 9, 0.06);
  --tl-ink-08: rgba(12, 10, 9, 0.08);
  --tl-ink-10: rgba(12, 10, 9, 0.1);
  --tl-ink-12: rgba(12, 10, 9, 0.12);
  --tl-ink-16: rgba(12, 10, 9, 0.16);
  --tl-ink-92: rgba(12, 10, 9, 0.92);

  --tl-muted-84: rgba(68, 64, 60, 0.84);
  --tl-muted-88: rgba(68, 64, 60, 0.88);
  --tl-muted-90: rgba(68, 64, 60, 0.9);
  --tl-placeholder: rgba(87, 83, 78, 0.68);

  --tl-accent-06: rgba(202, 138, 4, 0.06);
  --tl-accent-16: rgba(202, 138, 4, 0.16);
  --tl-slate-16: rgba(148, 163, 184, 0.16);

  --tl-inset-55: inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --tl-inset-62: inset 0 1px 0 rgba(255, 255, 255, 0.62);
  --tl-inset-72: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  --tl-inset-76: inset 0 1px 0 rgba(255, 255, 255, 0.76);

  --tl-input-bg: rgba(245, 245, 244, 0.92);
  --tl-code-bg: rgba(245, 245, 244, 0.9);
  --tl-table-head-bg: rgba(245, 245, 244, 0.9);
  --tl-table-row-hover: rgba(202, 138, 4, 0.06);
  --tl-focus-border: rgba(202, 138, 4, 0.55);
  --tl-shadow-ghost: 0 12px 26px rgba(15, 23, 42, 0.06);

  /* Override base (dark) tokens from /styles.css */
  --bg: var(--tl-bg);
  --bg-2: var(--tl-bg-2);
  --panel: var(--tl-surface-solid);
  --panel-2: rgba(250, 250, 249, 0.9);
  --border: var(--tl-border-soft);
  --text: var(--tl-ink);
  --muted: var(--tl-muted);
  --accent-gold: var(--tl-accent);
  --accent-gold-2: var(--tl-accent-2);
  --good: #16a34a;
  --radius: 18px;
  --shadow: var(--tl-shadow);
  --shadow-raise: var(--tl-shadow-raise);
  --ring: var(--tl-ring);
  --ring-strong: var(--tl-ring-strong);

  /* Compatibility aliases (keep names stable for quick rollback) */
  --surface: var(--panel);
  --surface-2: var(--panel-2);
  --ink: var(--text);
  --accent: var(--accent-gold);
  --accent-strong: var(--accent-gold-2);
  --accent-soft: var(--tl-accent-soft);
}

body {
  background: var(--bg);
  color: var(--text);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  background: var(--tl-code-bg);
  border: 1px solid var(--border);
}

.backdrop {
  background: var(--bg);
}

.backdrop::before {
  background: var(--tl-backdrop);
}

.backdrop::after {
  background-image: var(--tl-backdrop-grid);
  opacity: 0.18;
}

/* Top navigation: glass in light mode */
.nav,
.navbar,
.topbar {
  background: var(--tl-nav-bg);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--tl-shadow-nav);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav,
  .navbar,
  .topbar {
    background: var(--tl-nav-bg-solid);
  }
}

.nav-links a {
  color: var(--muted);
  border-color: transparent;
}

.nav-links a:hover {
  background: var(--tl-ink-04);
  border-color: var(--tl-ink-08);
  color: var(--text);
}

.nav-links a.active {
  background: var(--accent-soft);
  border-color: var(--tl-accent-border-active);
  color: var(--accent-gold);
  box-shadow: var(--tl-inset-55);
}

.status-pill,
.user-pill {
  background: var(--tl-white-72);
  border: 1px solid var(--border);
  color: var(--text);
}

.user-pill {
  color: var(--tl-muted-84);
}

/* Cards & panels */
.hero,
.hero-card,
.card,
.panel,
.box,
.section {
  border-color: var(--border);
}

.hero {
  background: linear-gradient(180deg, var(--tl-accent-06), var(--tl-clear) 55%), var(--tl-surface);
  box-shadow: var(--shadow);
}

.hero::after {
  background: radial-gradient(circle at 30% 30%, var(--tl-accent-16), transparent 70%),
    radial-gradient(circle at 70% 20%, var(--tl-slate-16), transparent 66%);
  opacity: 0.8;
}

.hero-card {
  background: linear-gradient(180deg, var(--tl-white-65), var(--tl-clear) 55%), var(--tl-white-78);
  box-shadow: var(--shadow);
}

.card {
  background: linear-gradient(180deg, var(--tl-white-65), var(--tl-clear) 55%), var(--tl-white-86);
  box-shadow: var(--shadow);
}

.panel {
  background: linear-gradient(180deg, var(--tl-white-56), var(--tl-clear) 62%), var(--tl-white-86);
}

.panel--primary,
.panel--secondary,
.panel-split {
  background: var(--tl-white-60);
}

.quick-card,
.stat-card,
.note-item,
.list-item,
table {
  background: var(--tl-white-82);
  border-color: var(--border);
  box-shadow: var(--tl-shadow-surface);
}

.quick-card:hover,
.stat-link:hover {
  box-shadow: var(--tl-shadow-surface-hover);
  border-color: var(--tl-ink-12);
}

/* Badges / chips */
.meta-chip,
.pill,
.note-tag {
  background: var(--accent-soft);
  border-color: var(--tl-accent-border);
  color: var(--text);
}

.pill {
  color: var(--accent-gold);
}

.pill.ghost {
  background: var(--tl-white-72);
  border-color: var(--border);
  color: var(--muted);
}

.note-tag {
  color: var(--accent-gold);
  font-weight: 700;
}

/* Forms */
label {
  color: var(--tl-muted-88);
}

input,
textarea,
select {
  background: var(--tl-input-bg);
  color: var(--text);
  border-color: var(--tl-ink-12);
  box-shadow: var(--tl-inset-72);
  caret-color: var(--accent-gold);
}

input::placeholder,
textarea::placeholder {
  color: var(--tl-placeholder);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--tl-focus-border);
  box-shadow: 0 0 0 3px var(--ring), var(--tl-inset-76);
}

/* Buttons (compat: btn-primary/btn-ghost/primary-btn) */
.btn {
  background: var(--tl-white-72);
  border-color: var(--tl-ink-10);
  color: var(--text);
  box-shadow: var(--tl-shadow-control);
}

.btn:hover {
  box-shadow: var(--tl-shadow-control-hover);
}

.btn.primary,
.btn-primary,
.primary-btn {
  background: linear-gradient(180deg, var(--tl-white-22), var(--tl-clear) 35%),
    linear-gradient(180deg, var(--accent-gold-2) 0%, var(--accent-gold) 100%);
  border-color: var(--tl-accent-border-strong);
  color: #120b06;
  box-shadow: 0 22px 54px var(--tl-accent-glow), var(--tl-inset-55);
}

.btn.primary:hover,
.btn-primary:hover,
.primary-btn:hover {
  box-shadow: 0 26px 64px var(--tl-accent-glow-strong), var(--tl-inset-62);
}

.btn.ghost,
.btn-ghost {
  background: var(--tl-white-76);
  color: var(--text);
  border-color: var(--tl-ink-12);
  box-shadow: var(--tl-shadow-ghost);
}

.btn.ghost:hover,
.btn-ghost:hover {
  background: var(--tl-white-86);
  border-color: var(--tl-ink-16);
}

/* Tables */
table {
  background: var(--tl-white-92);
}

thead th {
  background: var(--tl-table-head-bg);
  color: var(--tl-muted-90);
  border-bottom-color: var(--tl-ink-08);
}

tbody td {
  color: var(--tl-ink-92);
  border-bottom-color: var(--tl-ink-06);
}

tbody tr:hover {
  background: var(--tl-table-row-hover);
}

:focus-visible {
  outline: 2px solid var(--ring-strong);
  outline-offset: 2px;
}