@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/IBMPlexSans-VariableFont_wdth_wght.ttf") format("truetype-variations");
  font-weight: 100 700;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- BRAND ---------- */
  --rs-burgundy:        #B8232A;  /* primary red */
  --rs-burgundy-hover:  #9D1B22;
  --rs-burgundy-press:  #7E141A;
  --rs-burgundy-tint:   #FBECEC;  /* pale red surface */
  --rs-burgundy-border: #ECC3C5;

  --rs-blue:            #1C5BA6;  /* corporate blue (secondary) */
  --rs-blue-hover:      #164B8A;
  --rs-blue-press:      #113C6F;
  --rs-blue-tint:       #E9F0F9;
  --rs-blue-border:     #BCD3EC;

  --rs-cream:           #F4F2EE;  /* warm paper */

  /* ---------- NEUTRALS (cool grey) ---------- */
  --rs-ink:             #0E0F11;  /* near-black, from logo */
  --rs-grey-900:        #1A1D21;
  --rs-grey-800:        #2C3138;
  --rs-grey-700:        #3D434B;
  --rs-grey-600:        #565D66;
  --rs-grey-500:        #6B7280;
  --rs-grey-400:        #9AA1AB;
  --rs-grey-300:        #C5CAD1;
  --rs-grey-250:        #D7DBE0;
  --rs-grey-200:        #E4E7EB;
  --rs-grey-150:        #ECEEF1;
  --rs-grey-100:        #F2F4F6;
  --rs-grey-50:         #F7F8FA;
  --rs-white:           #FFFFFF;

  /* ---------- SEMANTIC FG ---------- */
  --fg1: var(--rs-ink);        /* primary text / headings */
  --fg2: var(--rs-grey-700);   /* body, secondary */
  --fg3: var(--rs-grey-500);   /* muted, captions, labels */
  --fg4: var(--rs-grey-400);   /* placeholder, disabled */
  --fg-on-dark: #F4F5F7;
  --fg-on-brand: #FFFFFF;

  /* ---------- SEMANTIC BG ---------- */
  --bg-canvas:  var(--rs-grey-50);   /* app background */
  --bg-surface: #FFFFFF;             /* cards, panels */
  --bg-subtle:  var(--rs-grey-100);  /* inset / hover rows */
  --bg-sunken:  var(--rs-grey-150);  /* wells, rack chassis */
  --bg-dark:    var(--rs-grey-900);  /* dark chrome */

  /* ---------- BORDERS ---------- */
  --border-subtle: var(--rs-grey-150);
  --border:        var(--rs-grey-200);
  --border-strong: var(--rs-grey-300);
  --border-focus:  var(--rs-blue);

  /* ---------- STATUS ---------- */
  --success:        #1F8A5B;
  --success-tint:   #E6F4EC;
  --success-border: #B8E0CB;
  --warning:        #B0740C;
  --warning-tint:   #FBF1DC;
  --warning-border: #ECD3A0;
  --danger:         #C0392B;
  --danger-tint:    #FAEAE8;
  --danger-border:  #EEC2BC;
  --info:           var(--rs-blue);
  --info-tint:      var(--rs-blue-tint);
  --info-border:    var(--rs-blue-border);

  /* ---------- TYPE FAMILIES ---------- */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE (px / line-height / weight / tracking) ---------- */
  --text-display:   34px;  --lh-display:   1.1; /* @kind font */   --ls-display:  -0.02em;
  --text-h1:        26px;  --lh-h1:        1.15; /* @kind font */  --ls-h1:       -0.015em;
  --text-h2:        21px;  --lh-h2:        1.2; /* @kind font */   --ls-h2:       -0.01em;
  --text-h3:        18px;  --lh-h3:        1.25; /* @kind font */  --ls-h3:       -0.005em;
  --text-h4:        16px;  --lh-h4:        1.3; /* @kind font */   --ls-h4:        0; /* @kind font */
  --text-body:      14px;  --lh-body:      1.5; /* @kind font */
  --text-sm:        13px;  --lh-sm:        1.45; /* @kind font */
  --text-xs:        12.5px; --lh-xs:       1.4; /* @kind font */
  --text-label:     12px;  --lh-label:     1.3; /* @kind font */   --ls-label:     0.06em; /* uppercase eyebrow */
  --text-mono-sm:   12px;  --text-mono:    13px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---------- RADII ---------- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* ---------- SPACING (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- SHADOWS (cool, ink-tinted) ---------- */
  --shadow-xs: 0 1px 1px rgba(14,15,17,0.04);
  --shadow-sm: 0 1px 2px rgba(14,15,17,0.06), 0 1px 1px rgba(14,15,17,0.04);
  --shadow-md: 0 2px 6px rgba(14,15,17,0.07), 0 1px 2px rgba(14,15,17,0.05);
  --shadow-lg: 0 8px 24px rgba(14,15,17,0.10), 0 2px 6px rgba(14,15,17,0.06);
  --shadow-xl: 0 18px 48px rgba(14,15,17,0.16), 0 4px 12px rgba(14,15,17,0.08);
  --ring-focus: 0 0 0 3px rgba(28,91,166,0.28);
  --ring-danger: 0 0 0 3px rgba(192,57,43,0.24);
}


.rs-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--weight-bold);
  color: var(--fg1);
}
.rs-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1); line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1); font-weight: var(--weight-bold); color: var(--fg1);
}
.rs-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2); line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2); font-weight: var(--weight-semibold); color: var(--fg1);
}
.rs-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3); line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3); font-weight: var(--weight-semibold); color: var(--fg1);
}
.rs-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4); line-height: var(--lh-h4);
  font-weight: var(--weight-semibold); color: var(--fg1);
}
.rs-body {
  font-family: var(--font-sans);
  font-size: var(--text-body); line-height: var(--lh-body);
  font-weight: var(--weight-regular); color: var(--fg2);
}
.rs-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--fg2);
}
.rs-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs); line-height: var(--lh-xs); color: var(--fg3);
}
.rs-label {
  font-family: var(--font-sans);
  font-size: var(--text-label); line-height: var(--lh-label);
  letter-spacing: var(--ls-label); text-transform: uppercase;
  font-weight: var(--weight-semibold); color: var(--fg3);
}
.rs-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono); line-height: 1.4;
  font-weight: var(--weight-medium); color: var(--fg2);
  font-feature-settings: "zero" 1;
}
.rs-mono-label {  /* rack unit numbers, asset tags */
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm); line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: var(--weight-semibold); color: var(--fg3);
}