/* RootSystems brand reference for the product apps.
   The single source of the look: the tokens and component styles of the marketing site
   (rootsystems.app, rootsystems-site/public/css/brand.css), copied exactly. This file is identical
   in every product (Offboarding Proof, Vendor Risk, HIPAA, Standards Readiness); change it in one,
   copy it to all. Loaded last in partials/head.ejs. Scoped to page content (.container) so the
   product navigation keeps its own styling. */

:root {
  --rs-ink: #070a12;
  --rs-ink-2: #0d1220;
  --rs-cream: #f3ead9;
  --rs-paper: #f7f1e6;
  --rs-paper-line: rgba(17, 21, 31, 0.12);
  --rs-text: #11151f;
  --rs-text-mute: #545a66;
  --rs-saffron: #ff9933;
  --rs-saffron-hover: #ffad5c;
  --rs-saffron-deep: #c9620a;
  --rs-green: #3ccf6e;
  --rs-green-deep: #157836;
  --rs-violet: #9d7cff;
  --rs-violet-deep: #6a4fd0;
  --rs-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --rs-sans: "Inter", -apple-system, "Segoe UI", sans-serif;
  --rs-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
  --rs-radius-card: 14px;
  --rs-radius-pill: 999px;
}

/* ---------- headings: site serif, same weight and tracking as .rs-h2 ---------- */
.container h1,
.container h2,
.container h3 {
  font-family: var(--rs-serif);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--rs-text);
}
.container h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.08; }
.container h2 { font-size: 1.3rem; line-height: 1.2; }
.container h3 { font-size: 1.08rem; line-height: 1.25; }
/* Small in-card section labels stay compact. */
.container .form-card h2,
.container fieldset h2 { font-size: 1.08rem; }

/* ---------- buttons: .rs-btn--solid (primary) and .rs-btn--line-dark (secondary) ---------- */
.container button,
.container .btn,
.container input[type=submit] {
  border-radius: var(--rs-radius-pill);
  font-family: var(--rs-sans);
  font-weight: 600;
}
.container button:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-outline):not(.btn-accent-outline):not(.btn-google),
.container .btn-accent,
.container input[type=submit] {
  background: var(--rs-saffron);
  background-image: none;
  color: #1b0f02;
  border: none;
  box-shadow: 0 10px 30px rgba(255, 153, 51, 0.25);
  filter: none;
}
.container button:not(.btn-secondary):not(.btn-ghost):not(.btn-danger):not(.btn-outline):not(.btn-accent-outline):not(.btn-google):hover,
.container .btn-accent:hover,
.container input[type=submit]:hover {
  background: var(--rs-saffron-hover);
  color: #1b0f02;
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(255, 153, 51, 0.32);
  filter: none;
}
.container .btn-secondary {
  background: transparent;
  color: var(--rs-text);
  border: 1px solid var(--rs-paper-line);
  box-shadow: none;
}
.container .btn-secondary:hover {
  background: transparent;
  color: var(--rs-text);
  border-color: var(--rs-text);
  transform: none;
  box-shadow: none;
  filter: none;
}
.container button:disabled,
.container .btn[aria-disabled="true"] { opacity: 0.55; transform: none; box-shadow: none; }

/* ---------- cards: site card radius and hairline ---------- */
.container .card,
.container .form-card,
.container fieldset {
  border-radius: var(--rs-radius-card);
}
/* Accent stripes (fieldset.accent-*, .accent-left-*, .accent-top-*) keep their colour. */
.container .card:not([class*="accent-"]),
.container .form-card:not([class*="accent-"]),
.container fieldset:not([class*="accent-"]) {
  border-color: var(--rs-paper-line);
}