/* Manrope (SIL Open Font License, see assets/fonts/manrope-OFL.txt), stored
   locally so nothing is fetched online. */
@font-face { font-family: Manrope; src: url('../assets/fonts/manrope-400.ttf') format('truetype'); font-weight: 400 500; font-display: swap; }
@font-face { font-family: Manrope; src: url('../assets/fonts/manrope-700.ttf') format('truetype'); font-weight: 600 800; font-display: swap; }

/* Design tokens. Brand pink, yellow, black and white come from config.js
   (applyTheme) and default here. Status colors avoid the brand yellow. */
:root {
  --pink: #F4B0CB;
  --pink-soft: #FCEAF1;
  --pink-deep: #9E2A5E;
  --yellow: #F5D563;
  --black: #25231F;
  --white: #FFFFFF;

  --bg: #FFFDF7;
  --surface: #FFFFFF;
  --surface-2: #F8F2EC;
  --ink: var(--black);
  --muted: #635C55;
  --line: #E8E1D8;
  --line-strong: #D9D2C7;

  --ok: #15803D;    --ok-bg: #E8F6EC;
  --warn: #C2410C;  --warn-bg: #FDEEE5;
  --bad: #B91C1C;   --bad-bg: #FCEBEB;
  --info: #1D4ED8;  --info-bg: #EAF0FD;
  --idle: #635C55;  --idle-bg: #F2EDE7;

  --font-display: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(20, 17, 20, .06), 0 6px 18px rgba(20, 17, 20, .06);
  --ribbon-h: 30px;
  --rail-w: 340px;
  --gap: 20px;
}