/* HashHub → Dedalus theme bridge
   Drop this file at: web/static/css/theme-hashhub.css
   It maps HashHub Tailwind CSS variables to Dedalus tokens without touching HTML/JS.
*/

@supports (color: oklch(50% 0 0)) {
  :root {
    --background: oklch(1 0 0);
    --foreground: oklch(0.145 0 0);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.145 0 0);
    --popover: oklch(1 0 0);
    --popover-foreground: oklch(0.145 0 0);
    --primary: oklch(0.205 0 0);
    --primary-foreground: oklch(0.985 0 0);
    --secondary: oklch(0.97 0 0);
    --secondary-foreground: oklch(0.205 0 0);
    --muted: oklch(0.97 0 0);
    --muted-foreground: oklch(0.463 0 0);
    --accent: oklch(0.97 0 0);
    --accent-foreground: oklch(0.205 0 0);
    --destructive: oklch(0.524 0.245 25.723);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);
    --chart-1: oklch(0.646 0.222 41.116);
    --chart-2: oklch(0.6 0.118 184.704);
    --chart-3: oklch(0.398 0.07 227.392);
    --chart-4: oklch(0.828 0.189 84.429);
    --chart-5: oklch(0.769 0.188 70.08);
    --radius: 12px;
    --sidebar: oklch(0.985 0 0);
    --sidebar-foreground: oklch(0.145 0 0);
    --sidebar-primary: oklch(0.205 0 0);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.97 0 0);
    --sidebar-accent-foreground: oklch(0.205 0 0);
    --sidebar-border: oklch(0.922 0 0);
    --sidebar-ring: oklch(0.708 0 0);
  }
  :root, .dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);
    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);
    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);
    --primary: oklch(0.985 0 0);
    --primary-foreground: oklch(0.205 0 0);
    --secondary: oklch(0.269 0 0);
    --secondary-foreground: oklch(0.985 0 0);
    --muted: oklch(0.269 0 0);
    --muted-foreground: oklch(0.637 0 0);
    --accent: oklch(0.269 0 0);
    --accent-foreground: oklch(0.985 0 0);
    --destructive: oklch(0.396 0.141 25.723);
    --destructive-foreground: oklch(0.985 0 0);
    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.439 0 0);
    --chart-1: oklch(0.488 0.243 264.376);
    --chart-2: oklch(0.696 0.17 162.48);
    --chart-3: oklch(0.769 0.188 70.08);
    --chart-4: oklch(0.627 0.265 303.9);
    --chart-5: oklch(0.645 0.246 16.439);
    --radius: 12px;
    --sidebar: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.488 0.243 264.376);
    --sidebar-primary-foreground: oklch(0.985 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.439 0 0);
  }

  /* Map Dedalus tokens → HashHub tokens */
  :root {
    --bg: var(--background);
    --panel: var(--card);
    --panel-2: color-mix(in oklch, var(--card) 80%, black);
    --text: var(--foreground);
    --muted: var(--muted-foreground);
    --accent: oklch(from var(--chart-1) l c h);
    --accent-2: oklch(from var(--chart-2) l c h);
    --danger: oklch(from var(--destructive) l c h);
    --warn: oklch(0.72 0.12 85);
    --good: oklch(0.75 0.2 145);
    --bad: oklch(from var(--destructive) l c h);
    --shadow: 0 10px 30px oklch(0.145 0 0 / 0.35);
    --radius: var(--radius);
  }

  html, body { background: var(--background); color: var(--foreground); font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans"; }

  .topbar, .sidebar { background: var(--sidebar); color: var(--sidebar-foreground); border-bottom: 1px solid var(--sidebar-border); }
  .nav-link, .side-link { color: var(--sidebar-foreground); opacity: .9; }
  .nav-link.active, .side-link.active { color: var(--sidebar-primary-foreground); background: color-mix(in oklch, var(--sidebar-primary) 20%, transparent); border-radius: calc(var(--radius) - 4px); }

  .card, .panel, .kpi, .table, .chart-container { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }

  .btn, .nav-btn, .icon-btn {
    border-radius: calc(var(--radius) - 4px);
    border: 1px solid var(--border);
    background: color-mix(in oklch, var(--primary) 10%, transparent);
    color: var(--primary-foreground);
    padding: 0.55rem 0.9rem;
    line-height: 1;
    font-weight: 600;
  }
  .btn:hover, .nav-btn:hover { background: color-mix(in oklch, var(--primary) 20%, transparent); }

  .badge { 
    border-radius: 999px; 
    padding: 0.25rem 0.6rem; 
    border: 1px solid var(--border);
    background: var(--secondary);
    color: var(--secondary-foreground);
  }
  .badge.good{ background: color-mix(in oklch, var(--good) 20%, var(--secondary)); }
  .badge.warn{ background: color-mix(in oklch, var(--warn) 20%, var(--secondary)); }
  .badge.bad { background: color-mix(in oklch, var(--destructive) 20%, var(--secondary)); }

  table { border-collapse: separate; border-spacing: 0; width: 100%; }
  th, td { border-bottom: 1px solid var(--border); padding: .6rem .8rem; }
  thead th { background: color-mix(in oklch, var(--card) 60%, black); color: var(--muted-foreground); }

  :root{
    --chart-a: var(--chart-1);
    --chart-b: var(--chart-2);
    --chart-c: var(--chart-3);
    --chart-d: var(--chart-4);
    --chart-e: var(--chart-5);
  }
  canvas, svg { background: transparent; }

  #sidebar { border-right: 1px solid var(--sidebar-border); }
  #sidebar .side-link:hover { background: color-mix(in oklch, var(--sidebar-accent) 25%, transparent); }

  .kpi .value { font-weight: 800; font-size: 1.25rem; }
  .kpi .label { color: var(--muted-foreground); font-weight: 500; }
}