/* UVEYO design system: brand tokens and shared primitives.
   Theme colors (accent, canvas, text, borders) still come from themes.js so every
   existing module and the appearance studio keep working; these tokens add the
   manufacturing palette, type scale, radii, elevation and motion on top. */
:root {
  --uv-brand: #ff7900;
  --uv-brand-hover: #e86b00;
  --uv-bg: #f6f8ff;
  --uv-surface: #ffffff;
  --uv-text: #172033;
  --uv-text-2: #64748b;
  --uv-border: #e5eaf3;
  --uv-success: #16a34a;
  --uv-warning: #f59e0b;
  --uv-error: #dc2626;
  --uv-info: #2563eb;

  /* Status inks that keep 4.5:1 on white surfaces. */
  --uv-success-ink: #15803d;
  --uv-warning-ink: #b45309;
  --uv-error-ink: #b91c1c;
  --uv-info-ink: #1d4ed8;

  /* Pastel module tones: background, icon tile and ink. */
  --uv-peach-bg: #fff4ea;
  --uv-peach-tile: #ffe2c7;
  --uv-peach-ink: #b4530a;
  --uv-sky-bg: #eef5ff;
  --uv-sky-tile: #d8e8ff;
  --uv-sky-ink: #1d4ed8;
  --uv-mint-bg: #ecfaf3;
  --uv-mint-tile: #cdf1df;
  --uv-mint-ink: #15803d;
  --uv-lilac-bg: #f4f0ff;
  --uv-lilac-tile: #e4dbff;
  --uv-lilac-ink: #6d28d9;
  --uv-amber-bg: #fff8e6;
  --uv-amber-tile: #ffecb8;
  --uv-amber-ink: #a16207;
  --uv-teal-bg: #eaf8f8;
  --uv-teal-tile: #c9eeee;
  --uv-teal-ink: #0f766e;
  --uv-rose-bg: #fff0f3;
  --uv-rose-tile: #ffd9e1;
  --uv-rose-ink: #be123c;
  --uv-indigo-bg: #eff1ff;
  --uv-indigo-tile: #dadfff;
  --uv-indigo-ink: #4338ca;
  --uv-slate-bg: #f1f4f9;
  --uv-slate-tile: #dde4ee;
  --uv-slate-ink: #475569;
  --uv-violet-bg: #f8efff;
  --uv-violet-tile: #ecd8ff;
  --uv-violet-ink: #7e22ce;

  /* Type scale (rem follows the reader's font-size preference). */
  --uv-text-xs: 0.78rem;
  --uv-text-sm: 0.86rem;
  --uv-text-md: 1rem;
  --uv-text-lg: 1.15rem;
  --uv-text-xl: 1.45rem;
  --uv-text-2xl: 1.9rem;

  --uv-space-1: 4px;
  --uv-space-2: 8px;
  --uv-space-3: 12px;
  --uv-space-4: 16px;
  --uv-space-5: 20px;
  --uv-space-6: 24px;
  --uv-space-8: 32px;

  --uv-radius-sm: 10px;
  --uv-radius-md: 14px;
  --uv-radius-lg: 20px;
  --uv-radius-xl: 26px;

  --uv-shadow-1: 0 1px 2px #17203308, 0 2px 8px #1720330a;
  --uv-shadow-2: 0 2px 6px #1720330a, 0 12px 28px #17203312;
  --uv-shadow-3: 0 4px 12px #1720330f, 0 22px 48px #1720331a;
  --uv-focus: 0 0 0 3px color-mix(in srgb, var(--uv-brand) 35%, transparent);

  --uv-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --uv-fast: 140ms;
  --uv-slow: 260ms;

  /* Illustration palette. */
  --uv-ill-sky: #fff1e3;
  --uv-ill-glow: #ffe0c2;
  --uv-ill-far: #d9e1f0;
  --uv-ill-body: #2a3653;
  --uv-ill-window: #ffb169;
  --uv-ill-tank: #8fa1c2;
  --uv-ill-belt: #43506d;
  --uv-ill-box: #ff9a3d;
  --uv-ill-line: #ff7900;
}
:root[data-theme='dark'] {
  --uv-bg: var(--app-background);
  --uv-surface: var(--surface-primary);
  --uv-text: var(--text-primary);
  --uv-text-2: var(--text-secondary);
  --uv-border: var(--border-default);
  --uv-success-ink: #6ed6a6;
  --uv-warning-ink: #f5cb79;
  --uv-error-ink: #ff9b9b;
  --uv-info-ink: #94bdff;
  --uv-peach-bg: #2d2219;
  --uv-peach-tile: #4a3220;
  --uv-peach-ink: #ffb57a;
  --uv-sky-bg: #1b2433;
  --uv-sky-tile: #233650;
  --uv-sky-ink: #9cc2ff;
  --uv-mint-bg: #182a22;
  --uv-mint-tile: #1f3d30;
  --uv-mint-ink: #86e0b3;
  --uv-lilac-bg: #241f33;
  --uv-lilac-tile: #352b52;
  --uv-lilac-ink: #c8b5ff;
  --uv-amber-bg: #2b2516;
  --uv-amber-tile: #46391a;
  --uv-amber-ink: #f5cf6e;
  --uv-teal-bg: #172a2a;
  --uv-teal-tile: #1d3f3f;
  --uv-teal-ink: #7fdcd2;
  --uv-rose-bg: #2e1c22;
  --uv-rose-tile: #4a2430;
  --uv-rose-ink: #ffa3b8;
  --uv-indigo-bg: #1d1f33;
  --uv-indigo-tile: #2a2e54;
  --uv-indigo-ink: #b5bdff;
  --uv-slate-bg: #1f242c;
  --uv-slate-tile: #2c3440;
  --uv-slate-ink: #c3cedd;
  --uv-violet-bg: #271d31;
  --uv-violet-tile: #3d2853;
  --uv-violet-ink: #dcb4ff;
  --uv-shadow-1: 0 1px 2px #0000002e;
  --uv-shadow-2: 0 8px 26px #00000040;
  --uv-shadow-3: 0 16px 40px #00000059;
  --uv-ill-sky: #2a2119;
  --uv-ill-glow: #3b2a1b;
  --uv-ill-far: #2a3243;
  --uv-ill-body: #8b9cc0;
  --uv-ill-window: #ff9a3d;
  --uv-ill-tank: #5b6a88;
  --uv-ill-belt: #6d7a96;
  --uv-ill-box: #ff9a3d;
}

/* Tone helper: any primitive with .uv-tone-* picks up its pastel trio. */
.uv-tone-peach {
  --tone-bg: var(--uv-peach-bg);
  --tone-tile: var(--uv-peach-tile);
  --tone-ink: var(--uv-peach-ink);
}
.uv-tone-sky {
  --tone-bg: var(--uv-sky-bg);
  --tone-tile: var(--uv-sky-tile);
  --tone-ink: var(--uv-sky-ink);
}
.uv-tone-mint {
  --tone-bg: var(--uv-mint-bg);
  --tone-tile: var(--uv-mint-tile);
  --tone-ink: var(--uv-mint-ink);
}
.uv-tone-lilac {
  --tone-bg: var(--uv-lilac-bg);
  --tone-tile: var(--uv-lilac-tile);
  --tone-ink: var(--uv-lilac-ink);
}
.uv-tone-amber {
  --tone-bg: var(--uv-amber-bg);
  --tone-tile: var(--uv-amber-tile);
  --tone-ink: var(--uv-amber-ink);
}
.uv-tone-teal {
  --tone-bg: var(--uv-teal-bg);
  --tone-tile: var(--uv-teal-tile);
  --tone-ink: var(--uv-teal-ink);
}
.uv-tone-rose {
  --tone-bg: var(--uv-rose-bg);
  --tone-tile: var(--uv-rose-tile);
  --tone-ink: var(--uv-rose-ink);
}
.uv-tone-indigo {
  --tone-bg: var(--uv-indigo-bg);
  --tone-tile: var(--uv-indigo-tile);
  --tone-ink: var(--uv-indigo-ink);
}
.uv-tone-slate {
  --tone-bg: var(--uv-slate-bg);
  --tone-tile: var(--uv-slate-tile);
  --tone-ink: var(--uv-slate-ink);
}
.uv-tone-violet {
  --tone-bg: var(--uv-violet-bg);
  --tone-tile: var(--uv-violet-tile);
  --tone-ink: var(--uv-violet-ink);
}

/* Primitives */
.uv-card {
  background: var(--uv-surface);
  border: 1px solid var(--uv-border);
  border-radius: var(--uv-radius-lg);
  box-shadow: var(--uv-shadow-1);
}
.uv-icon-tile {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 12px;
  background: var(--tone-tile, var(--accent-soft));
  color: var(--tone-ink, var(--accent-ink));
}
.uv-icon-tile .icon {
  width: 20px;
  height: 20px;
}
.uv-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--uv-border);
  background: var(--uv-surface);
  color: var(--uv-text-2);
  font-size: var(--uv-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.uv-chip .icon {
  width: 15px;
  height: 15px;
}
.uv-section-title {
  margin: 0;
  font-size: var(--uv-text-lg);
  font-weight: 700;
  color: var(--uv-text);
}
.uv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-ink);
  font-weight: 600;
  font-size: var(--uv-text-sm);
  text-decoration: none;
  border-radius: 8px;
  padding: 4px 6px;
}
.uv-link .icon {
  width: 16px;
  height: 16px;
}
.uv-link:hover {
  background: var(--accent-soft);
}
.uv-trend {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: var(--uv-text-xs);
  font-weight: 700;
  background: var(--uv-slate-bg);
  color: var(--uv-slate-ink);
  direction: ltr;
  unicode-bidi: isolate;
}
.uv-trend.up {
  background: color-mix(in srgb, var(--uv-success) 14%, transparent);
  color: var(--uv-success-ink);
}
.uv-trend.down {
  background: color-mix(in srgb, var(--uv-error) 12%, transparent);
  color: var(--uv-error-ink);
}
.uv-skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--uv-border), var(--surface-secondary), var(--uv-border));
  background-size: 200% 100%;
  animation: uv-shimmer 1.4s linear infinite;
}
@keyframes uv-shimmer {
  to {
    background-position: -200% 0;
  }
}
:where(.uv-home, .topbar) :is(button, a, summary):focus-visible {
  outline: none;
  box-shadow: var(--uv-focus);
}
@media (prefers-reduced-motion: reduce) {
  .uv-skeleton {
    animation: none;
  }
}