/* ──────────────────────────────────────────────────────────────
   Voxler — colors_and_type.css
   Drop into any HTML file. Defines tokens + semantic classes.
   Source of truth: front/src/index.css (shadcn/ui Zinc, OKLch).
   ────────────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ── Color: neutrals ───────────────────────────── */
  --vx-bg:            oklch(1 0 0);                       /* page surface, app */
  --vx-bg-canvas:     oklch(0.985 0 0);                   /* page canvas, gray-50 */
  --vx-fg:            oklch(0.141 0.005 285.823);         /* primary text, near-black */
  --vx-fg-muted:      oklch(0.552 0.016 285.938);         /* muted-foreground */
  --vx-fg-subtle:     oklch(0.705 0.015 286.067);         /* placeholders, ring */

  --vx-card:          oklch(1 0 0);
  --vx-card-fg:       oklch(0.141 0.005 285.823);
  --vx-popover:       oklch(1 0 0);

  /* Signature — electric cobalt. Confident, platform-grade, voice/wave-coded. */
  --vx-primary:       oklch(0.52 0.24 265);                /* electric cobalt */
  --vx-primary-fg:    oklch(0.985 0 0);
  --vx-primary-soft:  oklch(0.96 0.03 265);                /* tint for backgrounds */
  --vx-primary-hover: oklch(0.46 0.24 265);                /* darker for hover */
  --vx-primary-ring:  oklch(0.52 0.24 265 / 0.30);         /* focus ring */

  /* Accent — acid lime. Used SPARINGLY for live / connecting / now states. */
  --vx-accent-live:    oklch(0.85 0.22 130);
  --vx-accent-live-fg: oklch(0.32 0.10 130);

  /* Ink — not the primary, but the deep-ink button option. */
  --vx-ink:           oklch(0.21 0.006 285.885);
  --vx-ink-fg:        oklch(0.985 0 0);

  --vx-secondary:     oklch(0.967 0.001 286.375);         /* very light gray */
  --vx-secondary-fg:  oklch(0.21 0.006 285.885);
  --vx-muted:         oklch(0.967 0.001 286.375);
  --vx-muted-fg:      oklch(0.552 0.016 285.938);
  --vx-hover-fill:    oklch(0.967 0.001 286.375);          /* hover fill on outline/ghost */
  --vx-hover-fill-fg: oklch(0.21 0.006 285.885);

  --vx-border:        oklch(0.92 0.004 286.32);
  --vx-input:         oklch(0.92 0.004 286.32);
  --vx-ring:          oklch(0.52 0.24 265);

  /* ── Color: semantic / status badges ──────────── */
  --vx-success-bg:    oklch(0.94 0.05 150);   --vx-success-fg:    oklch(0.45 0.13 150);   /* lime/emerald 100/700 */
  --vx-info-bg:       oklch(0.94 0.04 240);   --vx-info-fg:       oklch(0.45 0.16 250);   /* blue 100/700 */
  --vx-warn-bg:       oklch(0.95 0.07 90);    --vx-warn-fg:       oklch(0.50 0.14 80);    /* yellow 100/700 */
  --vx-danger-bg:     oklch(0.94 0.04 25);    --vx-danger-fg:     oklch(0.50 0.18 25);    /* red 100/700 */
  --vx-ai-bg:         oklch(0.94 0.05 320);   --vx-ai-fg:         oklch(0.45 0.18 320);   /* fuchsia 100/700 */
  --vx-process-bg:    oklch(0.94 0.06 295);   --vx-process-fg:    oklch(0.45 0.18 295);   /* purple 100/700 */
  --vx-classic-bg:    oklch(0.95 0.06 50);    --vx-classic-fg:    oklch(0.55 0.16 45);    /* orange 100/700 */
  --vx-destructive:   oklch(0.577 0.245 27.325);

  /* ── Radius ─────────────────────────────────────── */
  --vx-radius:        0.625rem;                            /* 10px, global */
  --vx-radius-sm:     calc(var(--vx-radius) - 4px);
  --vx-radius-md:     calc(var(--vx-radius) - 2px);
  --vx-radius-lg:     var(--vx-radius);
  --vx-radius-xl:     calc(var(--vx-radius) + 4px);
  --vx-radius-2xl:    calc(var(--vx-radius) + 8px);
  --vx-radius-pill:   9999px;

  /* ── Shadow ─────────────────────────────────────── */
  --vx-shadow-xs:     0 1px 2px 0 rgb(0 0 0 / 0.05);
  --vx-shadow-sm:     0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --vx-shadow-md:     0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);

  /* ── Spacing scale (tailwind-aligned, 4px base) ── */
  --vx-space-1: 4px;  --vx-space-2: 8px;   --vx-space-3: 12px; --vx-space-4: 16px;
  --vx-space-5: 20px; --vx-space-6: 24px;  --vx-space-8: 32px; --vx-space-10: 40px;
  --vx-space-12: 48px;

  /* ── Type ───────────────────────────────────────── */
  --vx-font-display:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vx-font-body:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vx-font-mono:     "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Type scale (px) ────────────────────────────── */
  --vx-text-xs:   12px;
  --vx-text-sm:   14px;
  --vx-text-base: 16px;
  --vx-text-lg:   18px;
  --vx-text-xl:   20px;
  --vx-text-2xl:  24px;
  --vx-text-3xl:  30px;
  --vx-text-4xl:  36px;
  --vx-text-5xl:  48px;
  --vx-text-6xl:  60px;

  /* ── Layout ─────────────────────────────────────── */
  --vx-sidebar-w:   256px;
}

/* ── Base ────────────────────────────────────────── */
html, body {
  font-family: var(--vx-font-body);
  font-size: var(--vx-text-base);
  line-height: 1.5;
  color: var(--vx-fg);
  background: var(--vx-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Semantic type classes ───────────────────────── */
.vx-display    { font-family: var(--vx-font-display); font-size: var(--vx-text-5xl); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; }
.vx-display-lg { font-family: var(--vx-font-display); font-size: var(--vx-text-6xl); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.vx-h1         { font-size: var(--vx-text-4xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.vx-h2         { font-size: var(--vx-text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }   /* page titles in app */
.vx-h3         { font-size: var(--vx-text-xl);  font-weight: 600; line-height: 1.3; }
.vx-h4         { font-size: var(--vx-text-lg);  font-weight: 600; line-height: 1.4; }
.vx-p          { font-size: var(--vx-text-base); font-weight: 400; line-height: 1.5; }
.vx-p-sm       { font-size: var(--vx-text-sm);  font-weight: 400; line-height: 1.45; }
.vx-muted      { color: var(--vx-fg-muted); }
.vx-label      { font-size: var(--vx-text-sm);  font-weight: 500; line-height: 1.4; }
.vx-tiny       { font-size: var(--vx-text-xs);  font-weight: 500; letter-spacing: 0.01em; }
.vx-mono       { font-family: var(--vx-font-mono); font-size: var(--vx-text-sm); }
.vx-tabular    { font-variant-numeric: tabular-nums; }

/* ── Components used across cards ───────────────── */
.vx-card {
  background: var(--vx-card); color: var(--vx-card-fg);
  border: 1px solid var(--vx-border); border-radius: var(--vx-radius-xl);
  box-shadow: var(--vx-shadow-sm);
}
.vx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border-radius: var(--vx-radius-md);
  font-size: var(--vx-text-sm); font-weight: 500; cursor: pointer;
  background: var(--vx-primary); color: var(--vx-primary-fg);
  border: 1px solid transparent; transition: background-color 150ms ease, box-shadow 150ms ease;
}
.vx-btn:hover { background: var(--vx-primary-hover); }
.vx-btn-outline {
  background: var(--vx-bg); color: var(--vx-fg);
  border: 1px solid var(--vx-border);
}
.vx-btn-outline:hover { background: var(--vx-hover-fill); }
.vx-btn-ghost { background: transparent; color: var(--vx-fg); border-color: transparent; }
.vx-btn-ghost:hover { background: var(--vx-hover-fill); }
.vx-btn-ink { background: var(--vx-ink); color: var(--vx-ink-fg); }
.vx-btn-ink:hover { background: oklch(0.30 0.006 285.885); }

.vx-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--vx-radius-sm);
  font-size: var(--vx-text-xs); font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
}
.vx-badge-pill { border-radius: var(--vx-radius-pill); padding: 4px 10px; }

.vx-input {
  height: 36px; padding: 0 12px; border-radius: var(--vx-radius-md);
  border: 1px solid var(--vx-input); background: var(--vx-bg); color: var(--vx-fg);
  font-size: var(--vx-text-sm); width: 100%; outline: none;
}
.vx-input:focus-visible { border-color: var(--vx-ring); box-shadow: 0 0 0 3px var(--vx-primary-ring); }