/* ============================================================
   tokens.css — Design System "Freezer Controle"
   Tema claro azul/ciano (refrigeração). Cores em oklch.
   ============================================================ */
:root {
  /* raio de borda */
  --radius: 0.75rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: calc(var(--radius) + 4px);
  --radius-xl: calc(var(--radius) + 8px);
  --radius-full: 999px;

  /* superfícies */
  --background: oklch(0.98 0.012 230);
  --foreground: oklch(0.18 0.04 240);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.18 0.04 240);
  --muted: oklch(0.95 0.015 225);
  --muted-foreground: oklch(0.5 0.04 240);
  --border: oklch(0.9 0.02 225);
  --border-strong: oklch(0.85 0.03 225);
  --input: oklch(0.92 0.02 225);

  /* marca */
  --primary: oklch(0.55 0.16 230);
  --primary-hover: oklch(0.49 0.16 230);
  --primary-foreground: oklch(0.99 0 0);
  --accent: oklch(0.7 0.15 200);

  /* estados semânticos */
  --success: oklch(0.6 0.15 150);
  --success-foreground: oklch(0.99 0 0);
  --warning: oklch(0.72 0.17 70);
  --danger: oklch(0.58 0.22 25);
  --danger-foreground: oklch(0.99 0 0);

  /* tints (fundos suaves dos ícones / badges) */
  --tint-primary: oklch(0.93 0.045 230);
  --tint-accent: oklch(0.93 0.05 200);
  --tint-warning: oklch(0.94 0.07 75);
  --tint-danger: oklch(0.94 0.07 25);
  --tint-success: oklch(0.93 0.06 150);

  /* gradiente do logo (floco) */
  --gradient-frost: linear-gradient(135deg, oklch(0.55 0.16 230), oklch(0.7 0.15 200));

  /* cores para Chart.js (canvas — hex equivalentes ao oklch acima) */
  --chart-critico: #d8443c;
  --chart-demais: #f0a531;
  --chart-primary: #2178ce;
  --chart-accent: #2bacc6;
  --chart-grid: #e6edf3;

  /* tipografia */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* sombras (tom frio) */
  --shadow-xs: 0 1px 2px oklch(0.5 0.06 240 / 0.05);
  --shadow-sm: 0 1px 3px oklch(0.5 0.06 240 / 0.07), 0 1px 2px oklch(0.5 0.06 240 / 0.04);
  --shadow-md: 0 4px 16px oklch(0.5 0.08 240 / 0.08);
  --shadow-lg: 0 16px 40px oklch(0.5 0.1 240 / 0.12);

  /* layout */
  --container: 1200px;
  --header-h: 68px;
}