/* ══════════════════════════════════════════════════════════════════════
   BRAND FLAG

   The @import line below is the flag. It sets the colour of the whole
   site — every page, every button, link, badge, progress step, border
   and tint, plus the phone browser bar.

   To switch, change only the filename inside the @import:
       palette-orange-blue → the current identity (orange and blue logo)
       palette-blue        → the previous blue identity
       palette-green       → the original green identity
   Save, then hard-refresh. Nothing else needs editing.

   Not covered by the flag: the PNG logo and app icons in assets/icons/,
   which are artwork rather than CSS. Rebuild those from a matching
   source logo with brand/generate-icons.py.
   ══════════════════════════════════════════════════════════════════════ */

@import url("palette-orange-blue.css");

/* ── Everything below derives from the palette above, so it follows the
      flag automatically. Only non-brand values are literals here. ────── */
:root {
  --bg2: #ffffff;
  --bg3: var(--accent-50);

  --surface:  rgba(var(--accent-rgb), 0.04);
  --surface2: rgba(var(--accent-rgb), 0.08);
  --border:   rgba(var(--accent-rgb), 0.12);
  --border2:  rgba(var(--accent-rgb), 0.2);

  --text:  #1f2937;
  --text2: var(--accent-800);
  --muted: #6b7280;

  /* Status colours carry meaning, not brand, so they never follow the
     flag. --green is success/pass/positive only — it stays green even
     when the brand itself is green. See the admin paper gauge
     (red/amber/green) and the passport photo pass/fail check. */
  --green:  #16a34a;
  --red:    #dc2626;
  --yellow: #ca8a04;

  --radius: 16px;
}

/* Palettes from before the rebrand have no orange: the wordmark falls back
   to the accent, as it always looked. */
:root {
  --wordmark-print: var(--brand-navy, var(--text));
  --wordmark-man:   var(--brand-orange, var(--accent));
}

/* "Print Man" written as the logo writes it: Print in navy, Man in orange.
   <span class="wordmark">Print<span>Man</span></span> */
.wordmark { color: var(--wordmark-print); font-weight: 800; letter-spacing: -0.01em; }
.wordmark > span, .wordmark > em { color: var(--wordmark-man); font-style: normal; }