/* ==========================================================================
   NodeOps Security - Home & Family

   An override layer, not a second stylesheet. style.css loads first and this
   one after it, so what is here is only what differs: the tokens, the
   typography, and the handful of rules the business site hardcodes.

   That is possible because style.css is almost entirely token-driven - four
   colour literals sit outside :root and the type resolves through var(--font)
   - so redefining the tokens genuinely redefines the site. The alternative, a
   1100-line copy, would mean fixing every shared component twice.

   The idiom is the opposite of the business site on purpose. That one is a
   terminal: black, monospace, square, amber. This one is paper: warm white,
   serif headings over a sans body, a single terracotta accent. The people who
   read it are not sysadmins, and a console would tell them this is not for
   them before they read a word.
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
/* Contrast is computed, not eyeballed. Against --bg: --fg 16.3:1, --fg-2
   10.6:1, --muted 6.7:1, --accent 5.6:1, white on --accent 6.0:1. The
   brighter terracotta the brand uses for display type is 4.2:1, which is
   below AA for body text, so it is --accent-bright and never carries a
   sentence. */

:root {
  --radius:    10px;

  --bg:        #faf7f2;
  --bg-2:      #f3eee6;
  --bg-3:      #ebe4d9;

  --fg:        #1a1a1a;
  --fg-2:      #3d3a36;
  --muted:     #5c5751;

  --rule:      #e2dcd3;
  --rule-2:    #cfc7ba;

  --accent:      #a8441f;   /* anything you read or click */
  --accent-bright:#c4552f;  /* display sizes and fills only */
  --accent-dim:  #7a3216;
  --accent-ink:  #ffffff;

  --crit:      #b3261e;
  --high:      #a8551f;
  --med:       #1f5fa8;
  --low:       #6b6660;

  /* No downloaded face. A family on a phone should not wait for a typeface,
     and the serif/sans pairing already reads as a different publication from
     the monospace next door. */
  --font-serif: Iowan Old Style, Charter, Palatino, "Palatino Linotype",
                Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
               "Liberation Mono", monospace;
  --font: var(--font-sans);

  --narrow: 680px;
  --measure: 66ch;
}

/* 2. Type ------------------------------------------------------------------ */

h1, h2, h3, h4, h5 {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.01em; }
h4 { font-size: 1rem; }

body { font-size: 1.02rem; line-height: 1.65; }
.lead { font-size: clamp(1.05rem, 1.7vw, 1.2rem); line-height: 1.6; }

/* The business site marks a section with "// LABEL", which is a comment in
   source code. Here it is a small caption, because it is read by people who
   have never seen a comment in source code. */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  color: var(--accent);
}
.eyebrow::before { content: none; }

/* .mono follows --font on the other site, and --font is a sans here, so it
   would quietly stop being monospace - on exactly the things that need it,
   like a key fingerprint. */
.mono { font-family: var(--font-mono); }

/* 3. The four literals style.css sets outside :root ------------------------ */

.term__ok::before { color: #1f7a52; }
.input::placeholder,
.textarea::placeholder { color: #8a837a; }

/* 4. Light-theme corrections ----------------------------------------------- */
/* The business site is dark, so a few rules assume light text on a dark
   ground. These are the ones that do not follow from the tokens alone. */

body { background: var(--bg); }

.header { background: rgba(250, 247, 242, 0.92); }
.header.is-stuck { box-shadow: 0 1px 0 var(--rule); }

.card:hover { background: var(--bg-2); }

.btn--ghost { border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

.notice { background: var(--bg-2); }

/* A rounded field looks wrong hard against a square one; the token rounds
   both, and the focus ring needs to follow the same shape. */
.input:focus, .textarea:focus, .select:focus { border-radius: var(--radius); }

/* The cancellation form's blanks are runs of underscores, because that is
   what somebody types into an email or writes on a printout. They are one
   unbreakable word to a browser, so on a phone they took the page sideways.
   Let them break rather than replacing them with something unprintable. */
.prose .notice p { overflow-wrap: anywhere; }

/* 5. Things the home site does not have ------------------------------------ */
/* Terminal artwork, severity tables and the diagram bands belong to the other
   site. Hidden rather than deleted from the shared sheet, so the business
   site keeps them and this one cannot accidentally show one. */

.term, .art-band, .findings, .stack { display: none; }