:root {
  --linen:   #f5f0e8;
  --pitch:   #1e1e1e;
  --forge:   #c03f27;
  --ember:   #d35227;
  --amber:   #d39329;
  --gold:    #e9a123;
  --oxblood: #3a1a1a;
  --deepsea: #1d293a;
  --forest:  #213d1f;
  --sand:    #e8e0d0;
  --white:   #ffffff;

  --border:        rgba(30,30,30,0.10);
  --border-strong: rgba(30,30,30,0.20);

  --font-display: 'Futura PT', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-body:    'Futura PT', 'Futura', 'Century Gothic', 'Trebuchet MS', sans-serif;
  --font-mono:    'Space Mono', monospace;

  --r-sm:  8px;
  --r-md:  16px;
  --r-lg:  32px;

  --sidebar-w: 224px;
  --header-h:  54px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--linen);
  color: var(--pitch);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 100vh;
  overflow-x: hidden;
}

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--header-h) 1fr;
  min-height: 100vh;
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 2px; }

/* ─── THEME TRANSITION ─── */
*, *::before, *::after { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.05s ease; }
/* Don't animate transforms/layout */
.tab-content, .sidebar, .planning-overlay { transition: none; }

/* ─── DARK MODE ─── */
[data-theme="dark"] {
  --linen:         #1c1c1c;
  --pitch:         #e5dfd2;
  --white:         #252525;
  --sand:          #2e2e2e;
  --border:        rgba(229,223,210,0.08);
  --border-strong: rgba(229,223,210,0.16);
}
[data-theme="dark"] .nav-item:hover        { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .nav-item.active       { background: rgba(192,63,39,0.15); }
[data-theme="dark"] .day-header            { background: var(--sand); }
[data-theme="dark"] .day-task             { background: var(--sand); }
[data-theme="dark"] .modal-overlay        { background: rgba(0,0,0,0.7); }
