/* TaxOwl — Brand Canvas palettes + Inter + white glass + dark mode */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500&display=swap');

:root{
  --font-sans: "Inter", "Helvetica Neue", Helvetica, system-ui, sans-serif;
  --font-display: "Inter", "Helvetica Neue", Helvetica, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Default palette: Classic Trust Blue (light) */
  --color-surface: #ffffff;
  --color-paper: #F8FAFC;
  --color-paper-2: #f1f5f9;
  --color-paper-3: #e2e8f0;
  --color-line: #e2e8f0;
  --color-line-strong: #cbd5e1;
  --color-fg: #1E293B;
  --color-ink: #0D1B2A;
  --color-ink-2: #1e2d42;
  --color-ink-3: #243044;
  --color-muted: #64748b;
  --color-subtle: #94a3b8;
  --color-accent: #3B82F6;
  --color-accent-fg: #ffffff;
  --color-ok: #1f7a4d;
  --color-ok-bg: #e7f4ec;
  --color-ok-bright: #6ee7b7;
  --color-warn: #9a6700;
  --color-warn-bg: #fbf3d8;
  --color-warn-bright: #fcd34d;
  --color-danger: #b42318;
  --color-danger-bg: #fde8e6;
  --color-danger-bright: #fda4af;
  --color-info: #185fa5;
  --color-info-bg: #e6f1fb;
  --color-diag-data: #e6f4ea;
  --color-diag-data-b: #1e8e3e;
  --color-diag-agent: #fce8e6;
  --color-diag-agent-b: #c5221f;
  --color-diag-process: #e8f0fe;
  --color-diag-process-b: #1a73e8;
  --color-diag-decision: #fef7e0;
  --color-diag-decision-b: #c88800;
  --color-diag-hitl: #fde8e6;
  --color-diag-hitl-b: #b42318;
  --color-diag-auto: #e7f4ec;
  --color-diag-auto-b: #1f7a4d;
  --color-diag-dispatch: #eef0f6;
  --color-diag-dispatch-b: #3d4a5c;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px;
  --shadow-border: 0 0 0 1px rgba(13,27,42,.06), 0 1px 2px -1px rgba(13,27,42,.06), 0 2px 4px rgba(13,27,42,.04);
  --shadow-lift: 0 0 0 1px rgba(13,27,42,.08), 0 8px 20px -8px rgba(13,27,42,.14);
  --shadow-glass: 0 8px 32px rgba(13,27,42,.07), 0 1px 0 rgba(255,255,255,.6) inset;
  --nav-h: 64px;
  /* Brand palette vars */
  --brand-primary: #0D1B2A;
  --brand-secondary: #3B82F6;
  --brand-accent: #F8FAFC;
}
/* Palette: Executive Black — #111827 / #D97706 / #FFFFFF */
[data-palette="black"]{
  --brand-primary: #111827;
  --brand-secondary: #D97706;
  --brand-accent: #FFFFFF;
  --color-ink: #111827;
  --color-accent: #D97706;
  --color-paper: #FFFFFF;
  --color-paper-2: #f9fafb;
  --color-line: #e5e7eb;
  --color-info-bg: #fffbeb;
  --color-info: #92400e;
}
/* Palette: Modern Energy Orange — #EA580C / #475569 / #FFFBEB */
[data-palette="orange"]{
  --brand-primary: #EA580C;
  --brand-secondary: #475569;
  --brand-accent: #FFFBEB;
  --color-ink: #7c2d12;
  --color-accent: #475569;
  --color-paper: #FFFBEB;
  --color-paper-2: #fff7ed;
  --color-line: #fed7aa;
  --color-info-bg: #f1f5f9;
  --color-info: #334155;
}
/* Palette: Financial Growth Green — #15803D / #38BDF8 / #B45309 (accent is warm gold) */
[data-palette="green"]{
  --brand-primary: #15803D;
  --brand-secondary: #38BDF8;
  --brand-accent: #FFFBEB;
  --color-ink: #14532d;
  --color-accent: #0284c7;
  --color-paper: #f0fdf4;
  --color-paper-2: #dcfce7;
  --color-line: #bbf7d0;
  --color-info-bg: #e0f2fe;
  --color-info: #075985;
}

/* Dark mode — per palette, keep secondary as accent, use dark paper */
[data-theme="dark"]{
  --color-paper: #0f172a;
  --color-paper-2: #1e293b;
  --color-paper-3: #334155;
  --color-surface: #1e293b;
  --color-line: #334155;
  --color-line-strong: #475569;
  --color-fg: #f1f5f9;
  --color-ink: #f8fafc;
  --color-ink-2: #e2e8f0;
  --color-muted: #94a3b8;
  --color-subtle: #64748b;
  --color-info-bg: #1e293b;
  --shadow-border: 0 0 0 1px rgba(255,255,255,.06), 0 8px 20px rgba(0,0,0,.35);
  --shadow-lift: 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.45);
  --shadow-glass: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"][data-palette="black"]{
  --color-paper: #020617;
  --color-accent: #f59e0b;
}
[data-theme="dark"][data-palette="orange"]{
  --color-paper: #1c0f0a;
  --color-accent: #94a3b8;
}
[data-theme="dark"][data-palette="green"]{
  --color-paper: #052e16;
  --color-accent: #38bdf8;
}
[data-theme="dark"][data-palette="blue"]{
  --color-accent: #60a5fa;
}

*{box-sizing:border-box}
html{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; scroll-behavior:smooth}
body{ margin:0; background: var(--color-paper); color: var(--color-fg); font-family: var(--font-sans); line-height:1.6}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--color-accent); outline-offset:2px}

/* mesh */
.bg-mesh{ position:fixed; inset:0; z-index:-1; pointer-events:none; background:
  radial-gradient(900px 600px at 12% 0%, color-mix(in srgb, var(--color-accent) 8%, transparent) 0%, transparent 60%),
  radial-gradient(800px 500px at 90% 10%, color-mix(in srgb, var(--brand-primary) 6%, transparent) 0%, transparent 60%),
  var(--color-paper);
}
[data-theme="dark"] .bg-mesh{ background:
  radial-gradient(900px 600px at 12% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%, transparent 60%),
  radial-gradient(800px 500px at 90% 10%, color-mix(in srgb, var(--brand-primary) 20%, transparent) 0%, transparent 60%),
  var(--color-paper);
}

/* header glass */
.site-header{
  position:sticky; top:0; z-index:30;
  border-bottom:1px solid var(--color-line);
  background: color-mix(in srgb, var(--color-paper) 72%, transparent);
  backdrop-filter: saturate(1.2) blur(16px);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
}
.header-inner{ max-width:1400px; margin:0 auto; display:flex; flex-direction:column; gap:12px; padding:12px 16px}
@media(min-width:1024px){ .header-inner{ flex-direction:row; align-items:center; justify-content:space-between; padding:12px 24px}}
.nav-tabs{ display:flex; gap:4px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none}
.nav-tabs::-webkit-scrollbar{display:none}
.tab-btn{
  flex-shrink:0; border:0; cursor:pointer; border-radius:999px; padding:8px 12px; font-size:13px; font-weight:500; transition: background .15s, color .15s;
  color: var(--color-muted); background: transparent;
}
.tab-btn.active{ background: var(--color-ink); color: var(--color-paper)}
.tab-btn:not(.active):hover{ background: var(--color-paper-2); color: var(--color-fg)}
[data-theme="dark"] .tab-btn.active{ background: var(--color-paper-2); color: var(--color-fg); border:1px solid var(--color-line)}
.icon-btn{ width:36px; height:36px; border-radius:999px; border:1px solid var(--color-line); background: color-mix(in srgb, var(--color-surface) 80%, transparent); display:grid; place-items:center; cursor:pointer}

/* layout */
.container{ max-width:1400px; margin:0 auto; padding:24px 16px}
@media(min-width:640px){ .container{ padding:32px 24px}}
.card{ background: color-mix(in srgb, var(--color-surface) 86%, transparent); backdrop-filter: blur(12px) saturate(1.15); border:1px solid var(--color-line); box-shadow: var(--shadow-border)}
.card.glass{ box-shadow: var(--shadow-glass)}
.rounded-28{ border-radius:28px}
.rounded-24{ border-radius:24px}
.rounded-20{ border-radius:20px}
.rounded-16{ border-radius:16px}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:500; border:0; cursor:pointer; transition: transform .15s, opacity .15s, background .15s, box-shadow .15s;
}
.btn:active{ transform: scale(.96)}
.btn-sm{ height:32px; padding:0 12px; font-size:12px; border-radius:8px}
.btn-md{ height:40px; padding:0 16px; font-size:14px; border-radius:12px}
.btn-default{ background: var(--color-ink); color: var(--color-paper); box-shadow: var(--shadow-border)}
.btn-default:hover{ background: var(--color-ink-2)}
.btn-outline{ background: transparent; color: var(--color-fg); box-shadow: var(--shadow-border)}
.btn-outline:hover{ background: var(--color-paper-2)}
.btn-ghost{ background: transparent; color: var(--color-muted)}
.btn-ghost:hover{ background: var(--color-paper-2); color: var(--color-fg)}
[data-theme="dark"] .btn-default{ background: var(--color-paper-2); color: var(--color-fg); border:1px solid var(--color-line)}
.badge{ display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase}
.badge-default{ background: var(--color-paper-2); color: var(--color-muted)}
.badge-accent{ background: var(--color-info-bg); color: var(--color-info)}
.badge-ok{ background: var(--color-ok-bg); color: var(--color-ok)}
.badge-warn{ background: var(--color-warn-bg); color: var(--color-warn)}
.badge-danger{ background: var(--color-danger-bg); color: var(--color-danger)}
.badge-ink{ background: var(--color-ink); color: var(--color-paper)}
[data-theme="dark"] .badge-ink{ background: var(--color-paper-2); color: var(--color-fg)}
.field{ margin-top:6px; height:40px; width:100%; border:0; border-radius:10px; background: var(--color-paper); box-shadow: var(--shadow-border); padding:0 12px; font-size:14px; color: var(--color-fg)}
.field:focus{ outline:2px solid var(--color-accent); outline-offset:0}
@media print{ .no-print{ display:none !important} body{ background:#fff} .print-edf{ box-shadow:none !important; margin:0 !important}}

/* typography helpers */
.font-display{ font-family: var(--font-display)}
.font-mono{ font-family: var(--font-mono)}
.text-ink{ color: var(--color-ink)}
.text-fg{ color: var(--color-fg)}
.text-muted{ color: var(--color-muted)}
.text-subtle{ color: var(--color-subtle)}
.text-accent{ color: var(--color-accent)}
.bg-paper{ background: var(--color-paper)}
.bg-paper-2{ background: var(--color-paper-2)}
.bg-surface{ background: var(--color-surface)}
.bg-ink{ background: var(--color-ink)}
.bg-diag-data{ background: var(--color-diag-data)} .border-diag-data{ border-color: var(--color-diag-data-b)}
.bg-diag-agent{ background: var(--color-diag-agent)} .border-diag-agent{ border-color: var(--color-diag-agent-b)}
.bg-diag-process{ background: var(--color-diag-process)} .border-diag-process{ border-color: var(--color-diag-process-b)}
.bg-diag-decision{ background: var(--color-diag-decision)} .border-diag-decision{ border-color: var(--color-diag-decision-b)}
.bg-diag-auto{ background: var(--color-diag-auto)} .border-diag-auto{ border-color: var(--color-diag-auto-b)}
.bg-diag-hitl{ background: var(--color-diag-hitl)} .border-diag-hitl{ border-color: var(--color-diag-hitl-b)}
.bg-diag-dispatch{ background: var(--color-diag-dispatch)} .border-diag-dispatch{ border-color: var(--color-diag-dispatch-b)}

/* palette picker */
.palette-fab{
  position:fixed; bottom:24px; right:24px; z-index:50;
  display:flex; flex-direction:column; gap:8px;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(12px);
  border:1px solid var(--color-line);
  padding:10px; border-radius:999px; box-shadow: var(--shadow-lift);
}
.palette-dot{
  width:36px; height:36px; border-radius:999px; border:2px solid var(--color-surface);
  cursor:pointer; transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.palette-dot:hover{ transform: scale(1.08)}
.palette-dot.active{ box-shadow: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-accent); transform: scale(1.08)}