/* MO'AR ERP — Design Tokens · Terracota & Lousa */
:root {
  /* === Cores · Primária — Terracota === */
  --color-primary-50:  #FBF1ED;
  --color-primary-100: #F7E2DA;
  --color-primary-200: #EFC2B2;
  --color-primary-300: #E29F87;
  --color-primary-400: #D67D62;
  --color-primary-500: #C75F4A;
  --color-primary-600: #AC4A38;
  --color-primary-700: #8C3D2D;
  --color-primary-800: #6B3025;
  --color-primary-900: #45221C;

  /* === Cores · Acento — Lousa === */
  --color-accent-50:  #ECF4F2;
  --color-accent-100: #DCEAE7;
  --color-accent-200: #B9D5CF;
  --color-accent-300: #8AB8B0;
  --color-accent-400: #5C9890;
  --color-accent-500: #2F6F6A;
  --color-accent-600: #245955;
  --color-accent-700: #1B4644;
  --color-accent-800: #143432;
  --color-accent-900: #0C2120;

  /* === Neutros quentes === */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAF6F1;
  --color-neutral-100: #F3EDE5;
  --color-neutral-200: #E8DFD3;
  --color-neutral-300: #D2C2B0;
  --color-neutral-400: #BCAA98;
  --color-neutral-500: #8A7569;
  --color-neutral-600: #6B594F;
  --color-neutral-700: #4A3B33;
  --color-neutral-800: #2A1F1B;
  --color-neutral-900: #1A120F;

  /* === Semânticas === */
  --color-success-500: #4F7A4A;
  --color-success-100: #E5EFDD;
  --color-warning-500: #C49025;
  --color-warning-100: #F6E8C8;
  --color-error-500:   #B53A2C;
  --color-error-100:   #F6D9D1;
  --color-info-500:    #2F6F6A;
  --color-info-100:    #DCEAE7;

  /* === Aliases semânticos === */
  --bg-page:        var(--color-neutral-50);
  --bg-surface:     var(--color-neutral-0);
  --bg-muted:       var(--color-neutral-100);
  --bg-subtle:      var(--color-neutral-200);
  --ink-strong:     var(--color-neutral-800);
  --ink:            var(--color-neutral-700);
  --ink-soft:       var(--color-neutral-500);
  --ink-disabled:   var(--color-neutral-400);
  --ink-inverse:    var(--color-neutral-0);
  --border-subtle:  var(--color-neutral-200);
  --border:         var(--color-neutral-300);
  --border-strong:  var(--color-neutral-400);

  /* === Tipografia === */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* === Espaçamento (base 4) === */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;

  /* === Raios === */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 999px;

  /* === Sombras === */
  --shadow-sm: 0 1px 2px rgba(42,31,27,0.06), 0 1px 1px rgba(42,31,27,0.04);
  --shadow-md: 0 4px 12px rgba(42,31,27,0.08), 0 2px 4px rgba(42,31,27,0.04);
  --shadow-lg: 0 12px 32px rgba(42,31,27,0.12), 0 4px 8px rgba(42,31,27,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg-page);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea {
  font-family: inherit;
  color: inherit;
}
*:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 2px;
  border-radius: 4px;
}
button { cursor: pointer; }

/* Scrollbar styling, gentle */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-neutral-300);
  border-radius: 999px;
  border: 2px solid var(--bg-page);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-neutral-400); }