@layer tokens {

:root {
  color-scheme: light;

  --font-sans: "Rawline", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;

  --color-bg: #eef2f7;
  --color-surface: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-surface-strong: #e2e8f0;
  --color-border: #dbe3ee;
  --color-border-strong: #c7d2e0;

  --color-text: #0f172a;
  --color-text-muted: #475569;
  --color-text-subtle: #64748b;

  --color-primary: #1351b4;
  --color-primary-strong: #0c326f;
  --color-primary-soft: #e8f0fb;
  --color-on-primary: #ffffff;

  --color-success: #168821;
  --color-success-soft: #e6f4e8;
  --color-warning: #b45309;
  --color-warning-soft: #fef3c7;
  --color-danger: #b91c1c;
  --color-danger-soft: #fee2e2;

  --color-layer-bairros: #1351b4;
  --color-layer-logradouros: #d97706;
  --color-layer-upload: #168821;

  --focus-ring: 0 0 0 3px rgba(19, 81, 180, 0.3);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-panel: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-popup: 0 12px 32px rgba(15, 23, 42, 0.18);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;

  --header-height: 64px;
  --panel-width: 320px;
  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;
}

[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #071d41;
  --color-surface: #0b2447;
  --color-surface-muted: #102c52;
  --color-surface-strong: #16365f;
  --color-border: #1e3a5f;
  --color-border-strong: #2b4a73;

  --color-text: #e2e8f0;
  --color-text-muted: #b6c5d9;
  --color-text-subtle: #93a8c2;

  --color-primary: #5992ed;
  --color-primary-strong: #81aefc;
  --color-primary-soft: #123a6b;
  --color-on-primary: #071d41;

  --color-success: #3fb950;
  --color-success-soft: #10381d;
  --color-warning: #f0b429;
  --color-warning-soft: #3d2b08;
  --color-danger: #f87171;
  --color-danger-soft: #431518;

  --color-layer-bairros: #5992ed;
  --color-layer-logradouros: #f0b429;
  --color-layer-upload: #3fb950;

  --focus-ring: 0 0 0 3px rgba(89, 146, 237, 0.36);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow-panel: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-popup: 0 12px 32px rgba(0, 0, 0, 0.5);
}

}