/* =====================================================================
   Rubik Infotech RMS — brand tokens
   The four squares of the Rubik logo ARE the status language of the app:
     blue   #2E3295  → in progress / interview / primary actions
     green  #00A44E  → eligible / passed / selected
     orange #F68020  → needs attention / review / on hold
     red    #ED1B24  → rejected / overdue / destructive
   Typeface: Rubik (self-hosted, SIL OFL 1.1) — rounded, legible at small sizes in dense tables.
   ===================================================================== */
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/rubik-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/rubik-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/rubik-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Rubik";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/rubik-latin-700-normal.woff2") format("woff2")}

:root {
  --rb-blue:   #2E3295;
  --rb-blue-700: #23277A;
  --rb-blue-50:  #EEEFFA;
  --rb-green:  #00A44E;
  --rb-green-50: #E6F6EE;
  --rb-orange: #F68020;
  --rb-orange-50: #FEF2E8;
  --rb-red:    #ED1B24;
  --rb-red-50: #FDE9EA;

  --rb-ink:    #1C1E3A;          /* body text: navy-tinted, from the tagline */
  --rb-muted:  #5E6382;
  --rb-line:   #DCDEEB;
  --rb-surface:#FFFFFF;
  --rb-canvas: #F5F6FB;

  --rb-radius-sm: 4px;           /* squares in the logo are crisp: keep radii small */
  --rb-radius:    6px;
  --rb-font: "Rubik", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Bootstrap 5 variable bridge (Phase 2 loads Bootstrap) */
  --bs-primary: var(--rb-blue);
  --bs-primary-rgb: 46, 50, 149;
  --bs-success: var(--rb-green);
  --bs-success-rgb: 0, 164, 78;
  --bs-warning: var(--rb-orange);
  --bs-warning-rgb: 246, 128, 32;
  --bs-danger: var(--rb-red);
  --bs-danger-rgb: 237, 27, 36;
  --bs-body-font-family: var(--rb-font);
  --bs-body-color: var(--rb-ink);
  --bs-body-bg: var(--rb-canvas);
  --bs-border-radius: var(--rb-radius);
}

/* Status pills: a solid 8px square (a "Rubik tile") + label */
.rb-status { display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:500;
  padding:.15rem .55rem .15rem .4rem; border-radius:var(--rb-radius-sm); line-height:1.5; white-space:nowrap; }
.rb-status::before { content:""; width:8px; height:8px; border-radius:1px; background:currentColor; flex:none; }
.rb-status--blue   { color:var(--rb-blue);   background:var(--rb-blue-50); }
.rb-status--green  { color:#007A3A;          background:var(--rb-green-50); }
.rb-status--orange { color:#B4570A;          background:var(--rb-orange-50); }
.rb-status--red    { color:#C0141C;          background:var(--rb-red-50); }
.rb-status--grey   { color:var(--rb-muted);  background:#EEF0F5; }

:focus-visible { outline:3px solid var(--rb-orange); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }