/* ============================================================
   Manila Fort Workforce — base styles
   Brand: gold #D69E23, cream #FBF8F1, charcoal #333333
   ============================================================ */

:root {
  --ink: #1C1B19;
  --charcoal: #333333;
  --gold: #D69E23;
  --gold-soft: #F5E8C8;
  --cream: #FBF8F1;
  --line: #E6E0D4;
  --white: #FFFFFF;
  --green: #3E7C5A;
  --green-soft: #E4F0E9;
  --amber: #B07A1E;
  --amber-soft: #F8EFD9;
  --red: #9B3B30;
  --red-soft: #F4E3E0;
  --slate: #6B6457;
  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#root { min-height: 100vh; }

button { font-family: var(--font); }

input, textarea, select {
  font-family: var(--font);
}

img { max-width: 100%; }

/* Accessible focus ring */
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
label:focus-within {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Loading splash before React mounts */
.boot {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate);
  font-family: var(--font);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}