/* themes.css — shared theme/font/size system for hero.html, main.html,
   review.html. Loaded BEFORE inline page-specific <style>.

   Theme values converted from
   ~/dev/Jarvis/browser-extension-v2/src/styles/globals.css (lines 79–179)
   HSL → hex/rgba so this codebase's existing CSS-variable consumers
   (var(--bg-app), var(--text), var(--accent), etc.) work unchanged. */

@font-face { font-family:'Omyu Pretty';      src:url('/static/fonts/omyu-pretty.ttf')      format('truetype'); font-display:swap; }
@font-face { font-family:'Ongleaf Saehayan'; src:url('/static/fonts/ongleaf-saehayan.ttf') format('truetype'); font-display:swap; }
@font-face { font-family:'Ongleaf Iril';     src:url('/static/fonts/ongleaf-iril.ttf')     format('truetype'); font-display:swap; }
@font-face { font-family:'RIDI Batang';      src:url('/static/fonts/ridi-batang.otf')      format('opentype'); font-display:swap; }
@font-face { font-family:'Gowun Dodum';      src:url('/static/fonts/gowun-dodum.ttf')      format('truetype'); font-display:swap; }
@font-face { font-family:'Sejong Geulggot';  src:url('/static/fonts/sejong-geulggot.ttf')  format('truetype'); font-display:swap; }
@font-face { font-family:'Nanum Star';       src:url('/static/fonts/nanum-star.ttf')       format('truetype'); font-display:swap; }

/* ── PAPER (default) — current main.html paper tone ── */
:root, :root[data-theme="paper"] {
  --bg-canvas:#EAEAE6; --bg-app:#F5F5F0; --bg-card:#FFFFFF; --bg-hover:#EFEFEA;
  --bg-sidebar:#EEEEE9; --bg-tab-active:#F5F5F0;
  --bg-tab-1:#CED7DE; --bg-tab-2:#B8C4CF; --bg-tab-3:#94A3B0;
  --bg-frame:#D8E6F3;
  --text:#111; --text-2:#555; --text-3:#999; --text-dim:#666; --text-dimmer:#999;
  --border:rgba(0,0,0,.1); --border-2:rgba(0,0,0,.18); --border-strong:rgba(0,0,0,.15);
  --accent:#2563EB; --green:#16a34a; --red:#dc2626; --yellow:#ca8a04;
  --accent-shadow:rgba(37,99,235,.40);
  /* hero.html aliases — keep its existing CSS untouched */
  --bg:var(--bg-canvas); --bg-card-2:var(--bg-app);
}

/* ── LIGHT — Jarvis :root (HSL → hex) ── */
:root[data-theme="light"] {
  --bg-canvas:#FFFFFF; --bg-app:#F8FAFC; --bg-card:#FFFFFF; --bg-hover:#F1F5F9;
  --bg-sidebar:#F8FAFC; --bg-tab-active:#FFFFFF;
  --bg-tab-1:#DBEAFE; --bg-tab-2:#BFDBFE; --bg-tab-3:#93C5FD;
  --bg-frame:#EFF6FF;
  --text:#0F172A; --text-2:#475569; --text-3:#94A3B0; --text-dim:#475569; --text-dimmer:#94A3B0;
  --border:#E2E8F0; --border-2:#CBD5E1; --border-strong:#94A3B0;
  --accent:#3B82F6; --green:#22C55E; --red:#EF4444; --yellow:#EAB308;
  --accent-shadow:rgba(59,130,246,.40);
  --bg:var(--bg-canvas); --bg-card-2:var(--bg-app);
}

/* ── DARK — Jarvis Beluga Arctic-Cyber ── */
:root[data-theme="dark"] {
  --bg-canvas:#050914; --bg-app:#0B1226; --bg-card:#0F1830; --bg-hover:#13203A;
  --bg-sidebar:#0A1020; --bg-tab-active:#0F1830;
  --bg-tab-1:#1E2A4A; --bg-tab-2:#293657; --bg-tab-3:#374B7D;
  --bg-frame:#10182E;
  --text:#F8FAFC; --text-2:#CBD5E1; --text-3:#64748B; --text-dim:#CBD5E1; --text-dimmer:#64748B;
  --border:#1E2A4A; --border-2:#293657; --border-strong:#374B7D;
  --accent:#00F2FF; --green:#22D47E; --red:#F05050; --yellow:#F5A623;
  --accent-shadow:rgba(0,242,255,.45);
  --bg:var(--bg-canvas); --bg-card-2:var(--bg-app);
}

/* ── WARM ── */
:root[data-theme="warm"] {
  --bg-canvas:#F4E8D5; --bg-app:#FAF1E0; --bg-card:#FFF8EC; --bg-hover:#EFE0C5;
  --bg-sidebar:#F0E2C5; --bg-tab-active:#FAF1E0;
  --bg-tab-1:#E5C99E; --bg-tab-2:#D4B07A; --bg-tab-3:#B89160;
  --bg-frame:#F6E6C9;
  --text:#3D2E15; --text-2:#7A5C3A; --text-3:#A58963; --text-dim:#7A5C3A; --text-dimmer:#A58963;
  --border:rgba(120,80,30,.18); --border-2:rgba(120,80,30,.28); --border-strong:rgba(120,80,30,.4);
  --accent:#EA7C20; --green:#5E8C3D; --red:#C94A2C; --yellow:#D4A82B;
  --accent-shadow:rgba(234,124,32,.40);
  --bg:var(--bg-canvas); --bg-card-2:var(--bg-app);
}

/* ── PROCURE — Bauhaus / Swiss industrial ── */
:root[data-theme="procure"] {
  --bg-canvas:#F2F2F2; --bg-app:#FFFFFF; --bg-card:#FFFFFF; --bg-hover:#E6E6E6;
  --bg-sidebar:#EAEAEA; --bg-tab-active:#FFFFFF;
  --bg-tab-1:#D9D9D9; --bg-tab-2:#BFBFBF; --bg-tab-3:#A6A6A6;
  --bg-frame:#E8E8E8;
  --text:#1A1A1A; --text-2:#4D4D4D; --text-3:#808080; --text-dim:#4D4D4D; --text-dimmer:#808080;
  --border:#CCCCCC; --border-2:#B3B3B3; --border-strong:#999999;
  --accent:#0038FF; --green:#00A651; --red:#E50019; --yellow:#FFB800;
  --accent-shadow:rgba(0,56,255,.40);
  --bg:var(--bg-canvas); --bg-card-2:var(--bg-app);
}

/* ── Font presets (data-font on <html>) ── */
[data-font="inter"]    *  { font-family:'Inter', sans-serif; }
[data-font="system"]   *  { font-family:-apple-system, 'Segoe UI', Roboto, sans-serif; }
[data-font="omyu"]     *  { font-family:'Omyu Pretty', sans-serif; }
[data-font="saehayan"] *  { font-family:'Ongleaf Saehayan', sans-serif; }
[data-font="iril"]     *  { font-family:'Ongleaf Iril', sans-serif; }
[data-font="ridi"]     *  { font-family:'RIDI Batang', serif; }
[data-font="gowun"]    *  { font-family:'Gowun Dodum', sans-serif; }
[data-font="sejong"]   *  { font-family:'Sejong Geulggot', serif; }
/* "default" preset = no rule = page CSS owns the font */

/* Font-size scaling. main.html and others have hundreds of inline
   `font-size:11px` etc. — `html { font-size }` cascade alone does
   not reach them. We apply `zoom` to each page's main content
   container instead of body so the body itself keeps filling the
   viewport with --bg-canvas (preventing whitespace gaps when zoom
   < 1). zoom is non-standard but widely supported (Chromium, Safari,
   modern Firefox). main.html uses .app, hero.html uses .page;
   review.html intentionally skipped (no fixed outer container). */
html { font-size: var(--phi-font-size, 14px); }
/* Zoom selectors: page-content containers + the inner modal element
   (NOT the backdrop). zoom on a position:fixed backdrop unreliably
   shifts its viewport coordinates in some browsers — keep backdrops
   at zoom:1 and scale the visible card inside instead. */
.app, .page,
#job-detail-modal,
.settings-modal,
.modal {
  zoom: calc(var(--phi-font-size, 14px) / 14px);
}

/* Theme-aware page-level scrollbars so vertical/horizontal native
   bars don't flash white on dark themes. The .kanban-specific styles
   in main.html stay narrower. */
html, body {
  scrollbar-width: thin;
  scrollbar-color: var(--border-2) transparent;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-track, body::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb, body::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
html::-webkit-scrollbar-thumb:hover, body::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* Dark theme: --accent is bright cyan (#00F2FF). Every place that
   puts white text on top of accent-colored backgrounds becomes
   unreadable. Override foreground to deep arctic. The
   [style*="background:var(--accent)"] selectors match inline button
   styles; named class selectors cover the rest of the inline-<style>
   rules in main.html. Specificity 0,0,2,0 beats inline <style>
   declarations (0,0,1,0). */
:root[data-theme="dark"] [style*="background:var(--accent)"],
:root[data-theme="dark"] [style*="background: var(--accent)"],
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .start-btn,
:root[data-theme="dark"] .apply-fix,
:root[data-theme="dark"] .must-fix-ai-btn,
:root[data-theme="dark"] .must-fix-row .apply-fix,
:root[data-theme="dark"] .view-btn.active,
:root[data-theme="dark"] .content-header .btn-primary,
:root[data-theme="dark"] .diff-comments button,
:root[data-theme="dark"] .settings-modal .close-btn,
:root[data-theme="dark"] .evo-prompt-toggle .toggle-btn.active,
:root[data-theme="dark"] .toggle-btn.active,
:root[data-theme="dark"] .rules-header button.primary,
:root[data-theme="dark"] .modal-actions .primary,
:root[data-theme="dark"] .review-iter-indicator,
:root[data-theme="dark"] .phase-pill,
:root[data-theme="dark"] .phase-tag {
  color: #050914 !important;
}

/* ── Settings modal shared styles ── */
.settings-trigger {
  position:fixed; top:14px; right:14px; z-index:200;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; opacity:.7; transition:all .15s;
}
.settings-trigger:hover { opacity:1; transform:rotate(30deg); }
.settings-trigger svg { width:18px; height:18px; fill:var(--text-2); }

.settings-modal-backdrop {
  position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1000;
  display:none; align-items:center; justify-content:center;
}
.settings-modal-backdrop.open { display:flex; }
.settings-modal {
  background:var(--bg-card); color:var(--text);
  border:1px solid var(--border); border-radius:12px;
  padding:24px; max-width:560px; width:92%;
  max-height:80vh; overflow-y:auto;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.settings-modal h2 { font-size:16px; margin:0 0 14px; font-weight:700; }
.settings-modal h3 { font-size:11px; text-transform:uppercase; color:var(--text-3); margin:14px 0 8px; letter-spacing:.06em; }
.settings-modal .grid { display:grid; gap:8px; }
.settings-modal .grid.themes { grid-template-columns:repeat(5,1fr); }
.settings-modal .grid.fonts  { grid-template-columns:repeat(3,1fr); }
.settings-modal .opt {
  border:1px solid var(--border); border-radius:6px;
  padding:8px 6px; cursor:pointer; text-align:center;
  font-size:11px; transition:all .15s;
  background:var(--bg-app); color:var(--text);
}
.settings-modal .opt:hover { border-color:var(--accent); }
.settings-modal .opt.active { border-color:var(--accent); background:var(--bg-hover); font-weight:600; }
.settings-modal .swatch { display:flex; height:22px; border-radius:3px; overflow:hidden; margin-bottom:4px; border:1px solid var(--border); }
.settings-modal .swatch span { flex:1; }
.settings-modal input[type="range"] { width:100%; }
.settings-modal .close-btn {
  background:var(--accent); color:#fff; border:none;
  padding:8px 16px; border-radius:6px; cursor:pointer;
  margin-top:14px; font-size:12px; font-weight:600;
}
.settings-modal .close-btn:hover { opacity:.9; }