/* ══════════════════════════════════════════════════════════════════════
   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-blue   → the current 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-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;
}