:root {
  --asset-primary: #ff3c00;
  --asset-primary-soft: #ff562d;
  --asset-dark: #2c3342;
  --asset-dark-2: #323948;
  --asset-dark-3: #1c2331;
  --asset-darkest: #141c2a;
  --asset-panel: #262c39;
  --asset-panel-high: #3a4252;
  --asset-panel-highest: #454d5d;
  --asset-text: #ffffff;
  --asset-text-muted: #d7dde7;   /* muted text on DARK surfaces only */
  --asset-text-soft: #eef2f8;
  --asset-outline: #6b7280;       /* muted text on LIGHT surfaces; icon/border on dark */
  --asset-warn: #fcb97b;
  --asset-error: #ffb4ab;
  --asset-error-container: #93000a;
  --asset-light-bg: #f1f3f6;
  --asset-light-surface: #ffffff;
  --asset-light-panel: #f7f9fc;
  --asset-light-line: #e2e4e9;
  --asset-secondary: #2c3342;
  --font-headline: Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-bg: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-muted: #e5e7eb;
  --color-surface-strong: #d1d5db;
  --color-border: #cbd5e1;
  --color-border-strong: #94a3b8;
  --color-text: #111827;
  --color-text-muted: #4b5563;   /* muted text on light surfaces — matches on-surface-variant */
  --color-text-soft: #6b7280;
  --color-primary: #374151;
  --color-primary-text: #ffffff;
  --color-danger: #b91c1c;
  --color-warning: #a16207;
  --color-success: #047857;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;

  /* Alpha surface variants */
  --asset-primary-alpha-10: rgb(255 60 0 / 0.10);
  --asset-primary-alpha-12: rgb(255 60 0 / 0.12);
  --asset-primary-alpha-14: rgb(255 60 0 / 0.14);
  --asset-primary-alpha-20: rgb(255 60 0 / 0.20);
  --asset-primary-alpha-30: rgb(255 60 0 / 0.30);
  --asset-surface-alpha-05: rgb(255 255 255 / 0.05);
  --asset-surface-alpha-06: rgb(255 255 255 / 0.06);

  /* Elevation shadows */
  --shadow-card:        0 18px 34px rgb(0 0 0 / 0.20);
  --shadow-panel:       0 16px 28px rgb(0 0 0 / 0.18);
  --shadow-glow:        0 10px 22px rgb(255 60 0 / 0.20);
  --shadow-glow-strong: 0 10px 24px rgb(255 60 0 / 0.30);

  /* Extended radius */
  --radius-card:  0.85rem;
  --radius-input: 0.65rem;
  --radius-pill:  999px;
  --radius-chip:  0.45rem;
}

html {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared contrast fixes for Tailwind utility-heavy pages.
   master.css is loaded after tailwind.output.css, so these aliases keep
   generated utility classes readable without rebuilding Tailwind. */
.bg-background,
.bg-surface,
.bg-surface-container,
.bg-surface-container-low,
.bg-surface-container-lowest,
.bg-surface-container-high,
.bg-surface-container-highest {
  color: var(--asset-text);
}

.bg-background {
  background-color: var(--asset-dark) !important;
}

.bg-surface,
.bg-surface-container {
  background-color: var(--asset-dark-2) !important;
}

.bg-surface-container-low {
  background-color: var(--asset-dark-3) !important;
}

.bg-surface-container-lowest {
  background-color: var(--asset-darkest) !important;
}

.bg-surface-container-high {
  background-color: var(--asset-panel-high) !important;
}

.bg-surface-container-highest {
  background-color: var(--asset-panel-highest) !important;
}

.text-white {
  color: var(--asset-text) !important;
}

.bg-background .text-on-surface,
.bg-background .text-on-background,
.bg-surface .text-on-surface,
.bg-surface-container .text-on-surface,
.bg-surface-container-low .text-on-surface,
.bg-surface-container-lowest .text-on-surface,
.bg-surface-container-high .text-on-surface,
.bg-surface-container-highest .text-on-surface {
  color: var(--asset-text) !important;
}

.bg-background .text-on-surface-variant,
.bg-background .text-outline,
.bg-surface .text-on-surface-variant,
.bg-surface .text-outline,
.bg-surface-container .text-on-surface-variant,
.bg-surface-container .text-outline,
.bg-surface-container-low .text-on-surface-variant,
.bg-surface-container-low .text-outline,
.bg-surface-container-lowest .text-on-surface-variant,
.bg-surface-container-lowest .text-outline,
.bg-surface-container-high .text-on-surface-variant,
.bg-surface-container-high .text-outline,
.bg-surface-container-highest .text-on-surface-variant,
.bg-surface-container-highest .text-outline {
  color: var(--asset-text-muted) !important;
}

.bg-background .text-outline\/50,
.bg-surface .text-outline\/50,
.bg-surface-container .text-outline\/50,
.bg-surface-container-low .text-outline\/50,
.bg-surface-container-lowest .text-outline\/50,
.bg-surface-container-high .text-outline\/50,
.bg-surface-container-highest .text-outline\/50 {
  color: rgb(215 221 231 / 0.72) !important;
}

.bg-background .placeholder\:text-outline\/50::placeholder,
.bg-background .placeholder\:text-on-surface-variant::placeholder,
.bg-background input::placeholder,
.bg-background textarea::placeholder,
.bg-surface input::placeholder,
.bg-surface textarea::placeholder,
.bg-surface-container input::placeholder,
.bg-surface-container textarea::placeholder,
.bg-surface-container-low input::placeholder,
.bg-surface-container-low textarea::placeholder,
.bg-surface-container-lowest input::placeholder,
.bg-surface-container-lowest textarea::placeholder,
.bg-surface-container-high input::placeholder,
.bg-surface-container-high textarea::placeholder,
.bg-surface-container-highest input::placeholder,
.bg-surface-container-highest textarea::placeholder {
  color: rgb(215 221 231 / 0.72);
  opacity: 1;
}

.bg-background input,
.bg-background select,
.bg-background textarea,
.bg-surface input,
.bg-surface select,
.bg-surface textarea,
.bg-surface-container input,
.bg-surface-container select,
.bg-surface-container textarea,
.bg-surface-container-low input,
.bg-surface-container-low select,
.bg-surface-container-low textarea,
.bg-surface-container-lowest input,
.bg-surface-container-lowest select,
.bg-surface-container-lowest textarea,
.bg-surface-container-high input,
.bg-surface-container-high select,
.bg-surface-container-high textarea,
.bg-surface-container-highest input,
.bg-surface-container-highest select,
.bg-surface-container-highest textarea {
  color: var(--asset-text);
}

/* Dark fixed bars use generated/arbitrary utility colors in several views.
   Keep inactive nav items readable while preserving the orange active state. */
header.fixed,
nav.fixed.bottom-0 {
  color: var(--asset-text);
}

header.fixed a,
header.fixed nav a,
nav.fixed.bottom-0 a {
  color: var(--asset-text-muted) !important;
  opacity: 1 !important;
}

header.fixed a:hover,
header.fixed nav a:hover,
nav.fixed.bottom-0 a:hover,
nav.fixed.bottom-0 a.scale-110,
html[data-page="assets-index"] nav.fixed.bottom-0 a[href="/assets"],
html[data-page="assets-scan"] nav.fixed.bottom-0 a[href="/assets/scan"],
html[data-page="asset-register"] nav.fixed.bottom-0 a[href="/assets/register"],
html[data-page="assets-templates"] nav.fixed.bottom-0 a[href="/assets/templates"],
html[data-page="assets-index"] header.fixed nav a[href="/assets"],
html[data-page="assets-scan"] header.fixed nav a[href="/assets/scan"],
html[data-page="asset-register"] header.fixed nav a[href="/assets/register"],
html[data-page="assets-templates"] header.fixed nav a[href="/assets/templates"] {
  color: var(--asset-primary) !important;
}

#qr-reader {
  min-height: 18rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--asset-darkest);
  border: 1px solid rgb(255 255 255 / 0.08);
}