/* OficinaFlow Design System — Tokens
   Responsabilidade: variáveis globais e utilitários mínimos.
   Não contém estilos de componentes. */

:root {
  color-scheme: light;

  /* =========================
     Cores base
     ========================= */
  --bg: #EEF0F3;
  --sidebar: #10151F;
  --sidebar-hover: #1B2230;
  --sidebar-text: #9AA4B8;
  --surface: #FFFFFF;
  --border: #E2E5EA;
  --text: #161B26;
  --text-secondary: #667085;
  --text-muted: #98A2B3;

  /* =========================
     Cores semânticas
     Use apenas para status/estado
     ========================= */
  --amber: #E8A33D;
  --amber-bg: #FDF3E2;
  --amber-text: #8A5A0F;

  --blue: #2E6BE0;
  --blue-bg: #EAF0FE;
  --blue-text: #1D4CAD;

  --green: #1D9E75;
  --green-bg: #E4F6EE;
  --green-text: #0F6E56;

  --red: #D8433A;
  --red-bg: #FBEAE9;
  --red-text: #A32D2D;

  --gray-bg: #F1F2F5;
  --gray-text: #667085;

  /* =========================
     Tipografia
     As fontes serão carregadas no _Layout.cshtml
     ========================= */
  --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --font-size-caption: 11px;
  --font-size-secondary: 12.5px;
  --font-size-body: 14px;
  --font-size-emphasis: 16px;
  --font-size-page-title: 20px;
  --font-size-kpi: 26px;

  --font-weight-regular: 400;
  --font-weight-medium: 500; /* token técnico; evitar como terceiro peso numa mesma tela */
  --font-weight-semibold: 600;
  --font-weight-bold: 700;   /* reservado à marca/logo */

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.65;

  /* =========================
     Espaçamento
     Escala baseada em 4px
     ========================= */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* =========================
     Radius
     ========================= */
  --radius: 10px;
  --radius-card: 10px;
  --radius-control: 8px;
  --radius-badge: 8px;
  --radius-avatar: 50%;

  /* =========================
     Tamanhos de controle
     ========================= */
  --control-height-sm: 32px;
  --control-height: 38px;
  --control-height-lg: 44px;

  /* =========================
     Ícones
     ========================= */
  --icon-nav: 18px;
  --icon-control: 16px;
  --icon-meta: 14px;

  /* =========================
     Layout
     ========================= */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --content-max-width: 1600px;

  /* =========================
     Elevação e foco
     Sombras apenas sutis
     ========================= */
  --shadow-popover: 0 8px 24px rgba(16, 21, 31, 0.10);
  --shadow-modal: 0 18px 48px rgba(16, 21, 31, 0.14);

  --focus-ring: 0 0 0 3px rgba(232, 163, 61, 0.22);
  --focus-border: #B7791F;

  /* =========================
     Transições
     ========================= */
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  /* =========================
     Z-index
     ========================= */
  --z-sidebar: 30;
  --z-topbar: 40;
  --z-dropdown: 100;
  --z-modal-backdrop: 200;
  --z-modal: 210;
  --z-toast: 300;
}

/* =========================
   Utilitários tipográficos
   ========================= */

.text-primary {
  color: var(--text);
}

.text-secondary {
  color: var(--text-secondary);
}

.text-muted {
  color: var(--text-muted);
}

.text-caption {
  font-size: var(--font-size-caption);
  line-height: var(--line-height-normal);
}

.text-secondary-size {
  font-size: var(--font-size-secondary);
  line-height: var(--line-height-normal);
}

.text-body {
  font-size: var(--font-size-body);
  line-height: var(--line-height-normal);
}

.text-emphasis {
  font-size: var(--font-size-emphasis);
  line-height: var(--line-height-tight);
}

.page-title {
  margin: 0;
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-page-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

.kpi-value {
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-kpi);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  font-variant-numeric: tabular-nums;
}

.font-regular {
  font-weight: var(--font-weight-regular);
}

.font-semibold {
  font-weight: var(--font-weight-semibold);
}

/* Identificadores: placa, OS, VIN, SKU, código de peça etc. */
.text-mono,
.vehicle-plate,
.order-number,
.vin,
.part-code,
.sku {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* =========================
   Utilitários de superfície
   ========================= */

.bg-page {
  background: var(--bg);
}

.bg-surface {
  background: var(--surface);
}

.border-default {
  border: 1px solid var(--border);
}

.rounded {
  border-radius: var(--radius);
}

.rounded-control {
  border-radius: var(--radius-control);
}

/* =========================
   Utilitários de layout
   ========================= */

.u-flex {
  display: flex;
}

.u-inline-flex {
  display: inline-flex;
}

.u-items-center {
  align-items: center;
}

.u-justify-between {
  justify-content: space-between;
}

.u-gap-1 {
  gap: var(--space-1);
}

.u-gap-2 {
  gap: var(--space-2);
}

.u-gap-3 {
  gap: var(--space-3);
}

.u-gap-4 {
  gap: var(--space-4);
}

/* =========================
   Acessibilidade
   ========================= */

/* Conteúdo disponível para leitores de tela, sem ocupar espaço visual. */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Classe utilitária para qualquer elemento interativo customizado. */
.focus-ring:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Respeita usuários que pedem menos animação no sistema operacional. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}