/* Visual identity of the Oriem Software site: steel blue + yellow (dark theme).
   All colors are "tokens" (variables) in :root below: to change the theme,
   change only these lines. Fonts: Inter if the visitor has it installed,
   otherwise the system font. We do NOT load fonts from Google, so no visitor
   data goes to third parties just for opening the site. */
:root {
  --bg: #1b2530;          /* page background */
  --bg-alt: #202c39;      /* alternate sections ("Fale com a gente") */
  --surface: #263444;     /* cards */
  --line: #344558;        /* borders */
  --text: #dbe3ec;        /* main text */
  --heading: #ffffff;     /* titles */
  --muted: #98a8ba;       /* secondary text */
  --accent: #facc15;      /* links, buttons, details */
  --accent-text: #1f1a03; /* text on top of the accent color */
  --header-bg: #141c25;   /* top bar */
  --hero-bg: #141c25;     /* big banner on the home page */
  --hero-text: #ffffff;
  --hero-muted: #b6c3d2;
  --highlight-bg: #3a3413;    /* the security block and notes */
  --highlight-line: #8a7618;
  --highlight-text: #fff8d6;
  --footer-bg: #141c25;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}
a { color: var(--accent); }
h1, h2, h3 { color: var(--heading); }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 20px; }

/* Top bar */
header.top { background: var(--header-bg); color: var(--hero-text); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--hero-text); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand svg { width: 30px; height: 30px; flex: none; }
.brand svg rect { fill: var(--accent); }
.brand svg circle { stroke: var(--accent-text); }
.brand svg circle + circle { fill: var(--accent-text); }
nav.menu { display: flex; gap: 6px 18px; flex-wrap: wrap; }
nav.menu a { color: var(--hero-muted); text-decoration: none; font-size: 15px; }
nav.menu a:hover, nav.menu a[aria-current="page"] { color: var(--hero-text); }

/* Home page */
.hero { background: var(--hero-bg); color: var(--hero-text); padding: 56px 0 64px; }
.hero h1 { color: var(--hero-text); font-size: clamp(28px, 5vw, 44px); line-height: 1.2; margin: 0 0 16px; max-width: 720px; }
.hero p { color: var(--hero-muted); font-size: 18px; max-width: 640px; margin: 0; }
.button { display: inline-block; background: var(--accent); color: var(--accent-text); text-decoration: none; padding: 12px 22px; border-radius: 8px; font-weight: 600; }
.button:hover { filter: brightness(1.1); }
section.block { padding: 56px 0; }
section.block.alt { background: var(--bg-alt); }
section.block h2 { font-size: 26px; margin: 0 0 24px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
.card h3 { margin: 0 0 8px; font-size: 18px; }
.cards .card { border-top: 3px solid var(--accent); }
.card p { margin: 0; color: var(--muted); }
.card.highlight { margin-top: 20px; background: var(--highlight-bg); border-color: var(--highlight-line); }
.card.highlight h3, .card.highlight p { color: var(--highlight-text); }

/* Legal pages */
main.doc { padding: 40px 0 64px; }
main.doc h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 4px; }
main.doc .updated { color: var(--muted); margin: 0 0 32px; }
main.doc h2 { font-size: 21px; margin: 36px 0 10px; }
main.doc h3 { font-size: 17px; margin: 22px 0 6px; }
main.doc ul, main.doc ol { padding-left: 22px; }
main.doc li { margin: 4px 0; }
main.doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 15px; }
main.doc th, main.doc td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
main.doc th { background: var(--bg-alt); color: var(--heading); }
.table-scroll { overflow-x: auto; }
.note { background: var(--highlight-bg); color: var(--highlight-text); border-left: 4px solid var(--accent); padding: 14px 16px; border-radius: 6px; }

/* Placeholder for data still to be filled in. */
mark.todo { background: #ffe58a; color: #1d2433; padding: 0 4px; border-radius: 3px; }

/* Footer */
footer.bottom { background: var(--footer-bg); border-top: 1px solid var(--line); padding: 28px 0; color: var(--muted); font-size: 14px; }
footer.bottom .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer.bottom nav { display: flex; gap: 16px; flex-wrap: wrap; }
footer.bottom a { color: var(--muted); }