@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Veect chrome tokens — ultra-minimal, flat, typography-first.
 * Light (paper/ink) is the default; dark is true carbon. The accent IS
 * the ink: color belongs to the customer's canvas, not the instrument.
 */
:root,
[data-theme='light'] {
  --bg: #fcfcfb;
  --panel: #fcfcfb;
  --raised: #ffffff;
  --line: #e7e6e2;
  --line-2: #cfcec8;
  --chip: #f4f3f0;
  --t1: #161513;
  --t2: #63615b;
  --t3: #9a978f;
  --accent: #161513;
  --accent-text: #161513;
  --accent-dim: rgba(22, 21, 19, 0.06);
  --btn-ink: #ffffff;
  --live: #5b7f5e;
  --warn: #9a7b3f;
  --danger: #b05e5e;
}

[data-theme='dark'] {
  --bg: #0e0e0d;
  --panel: #0e0e0d;
  --raised: #161615;
  --line: #262624;
  --line-2: #3a3a37;
  --chip: #161615;
  --t1: #f4f4f2;
  --t2: #a6a6a1;
  --t3: #73736e;
  --accent: #f4f4f2;
  --accent-text: #f4f4f2;
  --accent-dim: rgba(244, 244, 242, 0.09);
  --btn-ink: #0e0e0d;
  --live: #8ba88e;
  --warn: #c2a36b;
  --danger: #c97070;
}

html,
body,
#root {
  height: 100%;
}

body {
  @apply bg-bg font-sans text-[13px] leading-normal text-ink antialiased;
}

::selection {
  background: rgba(127, 127, 120, 0.3);
}

*:focus-visible {
  outline: 1.5px solid var(--t1);
  outline-offset: 1px;
  border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}