/* ==========================================================================
   Design System OMS Construções — tokens + base
   Manual do Proprietário · Residencial Agatha
   Nunca usar #ffffff puro: a "branca" da marca é o off-white #f5f4f0.
   ========================================================================== */

:root {
  /* --- Navy (primária) --- */
  --oms-indigo-950: #0a1626;
  --oms-indigo-900: #0d1c30;
  --oms-indigo-800: #102338;
  --oms-indigo-700: #112540; /* BRAND PRIMARY */
  --oms-indigo-600: #1a3358;
  --oms-indigo-500: #244271;
  --oms-indigo-400: #3d5a85;
  --oms-indigo-300: #7089a8;
  --oms-indigo-200: #b3c1d2;
  --oms-indigo-100: #dde4ec;
  --oms-indigo-50:  #f1f4f8;

  /* --- Gold (acento) --- */
  --oms-yellow-700: #9c7d2e;
  --oms-yellow-600: #b8923a;
  --oms-yellow-500: #c7a448; /* BRAND ACCENT */
  --oms-yellow-400: #d4b667;
  --oms-yellow-200: #e8d5a0;
  --oms-yellow-100: #f4ecd4;

  /* --- Neutros (off-white + cinza frio) --- */
  --oms-white:    #f5f4f0;
  --oms-gray-50:  #eeede8;
  --oms-gray-100: #e6e5df;
  --oms-gray-200: #dad9d1;
  --oms-gray-300: #c4c3ba;
  --oms-gray-400: #9ea0a6;
  --oms-gray-500: #767a85;
  --oms-gray-600: #565a64;
  --oms-gray-700: #3d4049;
  --oms-gray-800: #262930;
  --oms-gray-900: #14161b;

  /* --- Status --- */
  --oms-success:    #1f8a4c;
  --oms-success-bg: #e6f4ec;
  --oms-warning:    #d98a00;
  --oms-warning-bg: #fdf3e0;
  --oms-danger:     #cf3838;
  --oms-danger-bg:  #fbe9e9;

  /* --- Aliases semânticos --- */
  --brand-primary:       var(--oms-indigo-700);
  --brand-primary-hover: var(--oms-indigo-800);
  --brand-accent:        var(--oms-yellow-500);
  --brand-accent-hover:  var(--oms-yellow-600);

  --text-strong: var(--oms-indigo-950);
  --text-body:   var(--oms-gray-700);
  --text-muted:  var(--oms-gray-500);
  --text-subtle: var(--oms-gray-400);
  --text-link:       var(--oms-indigo-700);
  --text-link-hover: var(--oms-indigo-900);

  --surface-page:   var(--oms-white);
  --surface-card:   var(--oms-white);
  --surface-subtle: var(--oms-gray-50);
  --border-subtle:  var(--oms-gray-200);

  /* --- Tipografia --- */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Mulish', system-ui, sans-serif;
  --font-eyebrow: 'Space Grotesk', ui-monospace, monospace;

  /* --- Sombras (navy-tinted, nunca preto) --- */
  --shadow-sm: 0 2px 6px rgba(10, 22, 38, .08);
  --shadow-md: 0 8px 20px rgba(10, 22, 38, .10);
  --shadow-lg: 0 18px 40px rgba(10, 22, 38, .14);

  /* --- Motion --- */
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   340ms;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--oms-gray-100);
  font-family: var(--font-body);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }

input, button, textarea { font-family: inherit; }
button { -webkit-tap-highlight-color: transparent; }

::-webkit-scrollbar { width: 0; height: 0; }

/* Ícones inline (Lucide, stroke 2px) */
.oms-i { display: inline-flex; }
.oms-i svg { width: 100%; height: 100%; display: block; }

/* [hidden] precisa vencer o display:flex declarado inline nos botões */
[hidden] { display: none !important; }

/* "Folha" central do app — mesmo aspecto no desktop */
.app-sheet {
  max-width: 860px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--surface-page);
  position: relative;
  box-shadow: 0 0 60px rgba(10, 22, 38, .08);
}

/* Foco visível e acessível, sem alterar o layout */
:focus-visible {
  outline: 2px solid var(--brand-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}