/* tokens.css — design tokens, color palettes, and themes */
/* app.css - FocusTube. Compact, dark-first, responsive, no framework. */

/* ---------- tokens ---------- */
:root {
  --accent: #d4784a;
  --accent-fg: #1a110c;
  --bg: #0e0d0c;
  --bg2: #141210;
  --panel: #171513;
  --panel2: #1f1c19;
  --panel3: #27231f;
  --line: #2c2824;
  --line2: #38332e;
  --tx: #f2ebe3;
  --tx2: #c4bbb0;
  --muted: #9a9086;
  --subtle: #6e675f;
  --ok: #7d9a6c;
  --warn: #c4a35a;
  --err: #c45c4a;
  --r: 12px;
  --r2: 8px;
  --sh: 0 4px 20px rgba(0,0,0,.45);
  --sh2: 0 2px 8px rgba(0,0,0,.3);
  --sidebar: 236px;
  --top: 52px;
  --player: 62px;
  --f: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-display: "Literata", ui-serif, Georgia, serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --speed: 1;
}

html, body {
  background: var(--bg);
  color: var(--tx);
  font-family: var(--f);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .brand-t {
  font-family: var(--f-display) !important;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--tx);
}

.vcard-dur, .kpi-v, .pb-time, .pomo-time, .nook-meta-stat, .tabular {
  font-family: var(--f-mono) !important;
}

html[data-theme="light"] {
  --bg: #f8fafc;
  --bg2: #f1f5f9;
  --panel: #ffffff;
  --panel2: #f8fafc;
  --panel3: #e2e8f0;
  --line: #e2e8f0;
  --line2: #cbd5e1;
  --tx: #0f172a;
  --tx2: #334155;
  --muted: #64748b;
  --sh: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --sh2: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --c1: #64748b; --c2: #94a3b8; --c3: #cbd5e1; --c4: #e2e8f0; --c5: #f1f5f9;
}

/* ============================================================
   THEME: FocusTube 1:1 Design System (focustube-theme)
   ============================================================ */
html[data-theme="focustube"],
html[data-theme="focustube"][data-theme-ver="v2"] {
  --bg: #0b0e17;
  --bg2: #10141f;
  --panel: #151a28;
  --panel2: #1a2030;
  --panel3: #22293d;
  --card: #151a28;
  --card2: #1a2030;
  --line: #232a3d;
  --line2: #2f3852;
  --tx: #e8ecf5;
  --tx2: #b4bdd4;
  --muted: #8b93a9;
  --subtle: #5a6480;
  --accent: #4f7cff;
  --accent-fg: #ffffff;
  --ok: #22c55e;
  --warn: #f59e0b;
  --err: #ef4444;
  --danger: #ef4444;
  --radius: 10px;
  --r: 10px;
  --r2: 8px;
  --card-w: 168px;
  --pad: 10px;
  --fs: 13px;
  --sh: 0 4px 20px rgba(0, 0, 0, 0.55);
  --sh2: 0 2px 10px rgba(0, 0, 0, 0.4);
  --f: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --f-display: -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  --f-mono: ui-monospace, Menlo, Consolas, monospace;
}

html[data-theme="focustube"] body {
  background-color: #0b0e17 !important;
  color: #e8ecf5 !important;
  font-family: var(--f) !important;
}

html[data-theme="focustube"] h1,
html[data-theme="focustube"] h2,
html[data-theme="focustube"] h3,
html[data-theme="focustube"] .brand-t {
  font-family: var(--f-display) !important;
  color: #e8ecf5 !important;
}

html[data-theme="focustube"] .vcard,
html[data-theme="focustube"] .shelf-pick-card,
html[data-theme="focustube"] .card,
html[data-theme="focustube"] .link-card,
html[data-theme="focustube"] .note-card,
html[data-theme="focustube"] .pl-card,
html[data-theme="focustube"] .sh-card,
html[data-theme="focustube"] .stat,
html[data-theme="focustube"] .panel {
  background: #151a28 !important;
  border: 1px solid #232a3d !important;
  border-radius: 10px !important;
}

html[data-theme="focustube"] .vcard:hover,
html[data-theme="focustube"] .shelf-pick-card:hover,
html[data-theme="focustube"] .card:hover,
html[data-theme="focustube"] .link-card:hover,
html[data-theme="focustube"] .note-card:hover,
html[data-theme="focustube"] .pl-card:hover,
html[data-theme="focustube"] .sh-card:hover,
html[data-theme="focustube"] .stat:hover {
  border-color: #4f7cff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 16px rgba(79, 124, 255, 0.15) !important;
}

/* ============================================================
   THEME: Nook 1:1 Palette
   ============================================================ */
html[data-theme="nook"],
html[data-theme="dark"],
html[data-theme-ver="v2"] {
  --bg: #0e0d0c;
  --bg2: #141210;
  --panel: #171513;
  --panel2: #1f1c19;
  --panel3: #27231f;
  --line: #2c2824;
  --line2: #38332e;
  --tx: #f2ebe3;
  --tx2: #c4bbb0;
  --muted: #9a9086;
  --subtle: #6e675f;
  --accent: #d4784a;
  --ok: #7d9a6c;
  --warn: #c4a35a;
  --err: #c45c4a;
  --r: 12px;
  --r2: 8px;
  --sh: 0 4px 20px rgba(0, 0, 0, 0.45);
  --sh2: 0 2px 8px rgba(0, 0, 0, 0.3);
  --f: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-family: var(--f);
}

.vcard, .shelf-pick-card, .link-card, .card {
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08), 0 2px 10px rgba(0, 0, 0, 0.35);
  border-radius: 12px;
}

/* ============================================================
   THEME: Nextdeck Deep Navy Glass (1:1 with nextdeck-dashboard-theme.html)
   ============================================================ */
html[data-theme="nextdeck"] {
  --bg: #0a0e17;
  --bg2: #0d121c;
  --panel: #121826;
  --panel2: #141b2b;
  --panel3: #1c2438;
  --line: rgba(255, 255, 255, 0.08);
  --line2: rgba(255, 255, 255, 0.14);
  --tx: #e8edf5;
  --tx2: #8b95a8;
  --muted: #5c677a;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --r: 12px;
  --r2: 8px;
  --sh: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 8px 32px rgba(0, 0, 0, 0.45);
  --sh2: 0 4px 20px rgba(0, 0, 0, 0.35);
}
html[data-theme="nextdeck"] body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(34, 211, 238, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(14, 165, 233, 0.06) 0%, transparent 45%),
    linear-gradient(180deg, #0b1019 0%, #0a0e17 100%) !important;
  background-attachment: fixed !important;
}
html[data-theme="nextdeck"] .vcard,
html[data-theme="nextdeck"] .stat,
html[data-theme="nextdeck"] .sh-card,
html[data-theme="nextdeck"] .pl-card,
html[data-theme="nextdeck"] .note-card,
html[data-theme="nextdeck"] .empty-hero {
  background: rgba(18, 24, 38, 0.72) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
}
html[data-theme="nextdeck"] .vcard:hover,
html[data-theme="nextdeck"] .stat:hover {
  border-color: rgba(34, 211, 238, 0.35) !important;
  box-shadow: 0 0 20px rgba(34, 211, 238, 0.15), 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* ============================================================
   THEME: PredictParity Chalkboard Mono (1:1 with oklch.html)
   ============================================================ */
html[data-theme="oklch"] {
  --bg: oklch(0.2603 0 0);
  --bg2: oklch(0.22 0 0);
  --panel: oklch(0.2603 0 0);
  --panel2: oklch(0.29 0 0);
  --panel3: oklch(0.33 0 0);
  --line: oklch(1 0 0 / 0.14);
  --line2: oklch(1 0 0 / 0.22);
  --tx: oklch(0.985 0 0);
  --tx2: oklch(0.74 0 0);
  --muted: oklch(0.6698 0 0);
  --ok: oklch(0.7463 0.0604 130.33);
  --warn: oklch(0.8203 0.0764 85.06);
  --err: oklch(0.605 0.1194 14.55);
  --r: 2px;
  --r2: 2px;
  --f: 'JetBrains Mono', ui-monospace, monospace;
  --sh: none;
  --sh2: none;
}
html[data-theme="oklch"] body {
  background-color: var(--bg) !important;
  background-image:
    radial-gradient(ellipse at 50% 0%, oklch(0.32 0 0) 0%, transparent 60%),
    radial-gradient(circle at 80% 80%, oklch(0.22 0.01 260 / 0.4) 0%, transparent 40%) !important;
  background-attachment: fixed !important;
  font-family: var(--f) !important;
}
html[data-theme="oklch"] button,
html[data-theme="oklch"] input,
html[data-theme="oklch"] select,
html[data-theme="oklch"] textarea,
html[data-theme="oklch"] .btn {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
html[data-theme="oklch"] .vcard,
html[data-theme="oklch"] .stat,
html[data-theme="oklch"] .sidebar,
html[data-theme="oklch"] .topbar,
html[data-theme="oklch"] .statusbar,
html[data-theme="oklch"] .dialog,
html[data-theme="oklch"] .now,
html[data-theme="oklch"] .empty-hero,
html[data-theme="oklch"] .sh-card,
html[data-theme="oklch"] .pl-card,
html[data-theme="oklch"] .note-card {
  border-style: dashed !important;
  border-color: var(--line) !important;
  border-radius: 2px !important;
}
html[data-theme="oklch"] .btn {
  border-radius: 2px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}
html[data-theme="oklch"] .btn.primary {
  background: oklch(0.8203 0.0764 85.06) !important;
  color: #000 !important;
  border-color: transparent !important;
}

/* ============================================================
   THEME: OLED Pure Black
   ============================================================ */
html[data-theme="oled"] {
  --bg: #000000;
  --bg2: #050505;
  --panel: #0a0a0a;
  --panel2: #121212;
  --panel3: #1a1a1a;
  --line: #222222;
  --line2: #333333;
  --tx: #f5f5f5;
  --tx2: #a3a3a3;
  --muted: #737373;
  --ok: #22c55e;
  --warn: #eab308;
  --err: #ef4444;
  --r: 10px;
  --r2: 6px;
  --sh: 0 4px 20px rgba(0,0,0,0.85);
  --sh2: 0 2px 10px rgba(0,0,0,0.7);
}
html[data-theme="oled"] body {
  background: #000000 !important;
}

/* ============================================================
   THEME: Nordic Frost
   ============================================================ */
html[data-theme="nord"] {
  --bg: #2e3440;
  --bg2: #242933;
  --panel: #3b4252;
  --panel2: #434c5e;
  --panel3: #4c566a;
  --line: #4c566a;
  --line2: #616e88;
  --tx: #eceff4;
  --tx2: #d8dee9;
  --muted: #9aa5b8;
  --ok: #a3be8c;
  --warn: #ebcb8b;
  --err: #bf616a;
  --r: 12px;
  --r2: 8px;
  --sh: 0 8px 24px rgba(0,0,0,0.25);
  --sh2: 0 4px 12px rgba(0,0,0,0.2);
}

/* ============================================================
   THEME: Cyberpunk Obsidian
   ============================================================ */
html[data-theme="cyberpunk"] {
  --bg: #101114;
  --bg2: #15171a;
  --panel: #1b1e22;
  --panel2: #23272c;
  --panel3: #2c3138;
  --line: #323840;
  --line2: #424a54;
  --tx: #f0f3f6;
  --tx2: #9ba3a9;
  --muted: #6e767e;
  --ok: #00ff9f;
  --warn: #ffb800;
  --err: #ff0055;
  --r: 8px;
  --r2: 4px;
  --f: 'JetBrains Mono', ui-monospace, monospace;
  --sh: 0 0 20px rgba(0, 255, 159, 0.07), 0 8px 30px rgba(0,0,0,0.5);
  --sh2: 0 4px 12px rgba(0,0,0,0.4);
}
html[data-theme="cyberpunk"] body {
  font-family: var(--f) !important;
}

* { box-sizing: border-box; }
html, body { height: 100%; max-width: 100vw; overflow-x: hidden; }
body {
  margin: 0; font-family: var(--f); background: var(--bg); color: var(--tx);
  font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
body.cozy { font-size: 15px; }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 1.25rem; } h2 { font-size: 1rem; } h3 { font-size: .9rem; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.hidden { display: none !important; }
.row { display: flex; align-items: center; }
.row.gap { gap: 8px; } .row.wrap { flex-wrap: wrap; } .row.center { justify-content: center; }
.pad { padding: 14px; }
kbd {
  font: 600 11px ui-monospace, Menlo, Consolas, monospace; background: var(--panel2);
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px;
}
.dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.spacer-line { flex: 1; }
::selection { background: color-mix(in srgb, var(--accent) 40%, transparent); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }