/* ============================================
   DESIGN TOKENS — Sistema de Gestão Operacional
   ============================================ */

:root {
  /* Neutrals — soft blue-tinted background for brand presence */
  --c-bg: #eef2f7;
  --c-surface: #ffffff;
  --c-surface-2: #f6f8fb;
  --c-surface-3: #eef2f7;
  --c-border: #dbe2ec;
  --c-border-strong: #c4cede;
  --c-border-subtle: #e7ecf3;

  /* Text */
  --c-ink: #0f172a;
  --c-ink-2: #334155;
  --c-ink-3: #64748b;
  --c-ink-4: #94a3b8;
  --c-ink-inv: #ffffff;

  /* Brand — VELOCI naval blue */
  --c-brand: #232C51;
  --c-brand-600: #232C51;
  --c-brand-700: #1a2240;
  --c-brand-shade: #2e3a66;
  --c-brand-100: #e4e7f0;
  --c-brand-50: #f1f3f8;

  /* Accent — VELOCI sky blue */
  --c-accent: #3475BB;
  --c-accent-600: #2c65a3;
  --c-accent-shade: #3475BB;
  --c-accent-100: #dce8f5;
  --c-accent-50: #eef4fb;

  /* Tertiary — warm tones from manual */
  --c-tan: #E1AC75;
  --c-tan-50: #fbf3e9;
  --c-cream: #F2EFCA;

  /* Semantic */
  --c-success: #17794c;
  --c-success-50: #e8f5ee;
  --c-warn: #b54708;
  --c-warn-50: #fdf3e8;
  --c-danger: #b42318;
  --c-danger-50: #fdecea;
  --c-info: #0969da;
  --c-info-50: #eaf2ff;

  /* Radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;

  /* Shadows */
  --s-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --s-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --s-md: 0 4px 10px -2px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --s-lg: 0 12px 24px -6px rgba(15, 23, 42, 0.14), 0 4px 8px rgba(15, 23, 42, 0.06);
  --s-focus: 0 0 0 3px rgba(52, 117, 187, 0.25);

  /* Spacing scale (4px base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;

  /* Density controls (M by default) */
  --row-h: 44px;
  --cell-py: 12px;
  --card-pad: 20px;
  --field-h: 38px;

  /* Typography — Panton family (brand) via Barlow as web-safe substitute */
  --ff-sans: "Barlow", "Panton", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --ff-display: "Barlow", "Panton", ui-sans-serif, system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;

  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* Layout */
  --sidebar-w: 240px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;

  color-scheme: light;
}

/* Density: compact */
[data-density="compact"] {
  --row-h: 36px;
  --cell-py: 8px;
  --card-pad: 16px;
  --field-h: 34px;
}
/* Density: spacious */
[data-density="spacious"] {
  --row-h: 52px;
  --cell-py: 16px;
  --card-pad: 24px;
  --field-h: 42px;
}

/* Dark theme */
[data-theme="dark"] {
  --c-bg: #0a0f1e;
  --c-surface: #121a32;
  --c-surface-2: #0f1629;
  --c-surface-3: #18223f;
  --c-border: #222d4d;
  --c-border-strong: #2d3a5e;
  --c-border-subtle: #1a2340;

  --c-ink: #e8ecf5;
  --c-ink-2: #c2cbdc;
  --c-ink-3: #8c97b1;
  --c-ink-4: #5e6a85;
  --c-ink-inv: #0a0f1e;

  --c-brand: #6a8ac5;
  --c-brand-500: #89a4d3;
  --c-brand-100: #1d2748;
  --c-brand-50: #18203d;

  --c-accent: #5a9fe0;
  --c-accent-50: #16264a;

  --c-success: #4ade80;
  --c-success-50: #0f2a1e;
  --c-warn: #fbbf24;
  --c-warn-50: #2b1f0a;
  --c-danger: #f87171;
  --c-danger-50: #2a1216;
  --c-info: #6aa3ff;
  --c-info-50: #162442;

  color-scheme: dark;
}

/* ============================================
   Base
   ============================================ */
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* previne scroll no body; todo scroll fica em .main */
}
body {
  font-family: var(--ff-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
a {
  color: var(--c-accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Scrollbars (subtle) */