/* Rubix Design System — colors and type
   Source: RUBIX-Branding-2026.pdf + Rubix-Font-Style-Guide.pptx
*/

/* ---------- Webfonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Brand colour ---------- */
  --rubix-navy:    #17479E;   /* primary — Reflex Blue */
  --rubix-green:   #00A890;   /* secondary accent / full-stop */
  --rubix-cyan:    #08C0DE;   /* sub-line / link */
  --rubix-lime:    #C4D52E;
  --rubix-orange:  #FAA21B;
  --rubix-red:     #EF3A4C;   /* call-outs */
  --rubix-purple:  #AB4499;
  --rubix-pink:    #F27FB2;

  /* darker / lighter variants for hover states */
  --rubix-navy-700:  #103675;
  --rubix-navy-300:  #6E8DC8;
  --rubix-navy-50:   #EAF0FA;
  --rubix-green-600: #008871;

  /* ---------- Neutrals ---------- */
  --fg-1: #333333;          /* primary body text */
  --fg-2: #555555;          /* muted body / captions */
  --fg-3: #6F7171;          /* labels, footnotes */
  --hairline: #DDE3EB;      /* table + card borders */
  --panel:   #F5F7FA;       /* right-rail / surface */
  --bg:      #FFFFFF;

  /* ---------- Semantic ---------- */
  --color-primary: var(--rubix-navy);
  --color-accent:  var(--rubix-green);
  --color-link:    var(--rubix-cyan);
  --color-danger:  var(--rubix-red);
  --color-warning: var(--rubix-orange);
  --color-success: var(--rubix-green);

  /* ---------- Typography ---------- */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Open Sans', 'Calibri', system-ui, sans-serif;
  --font-pill:    'Arial Black', 'Helvetica Black', 'Open Sans', sans-serif;

  /* type scale (web px) */
  --fs-cover:   44px;
  --fs-h1:      52px;   /* slide title */
  --fs-h2:      32px;   /* sub-section */
  --fs-h3:      22px;   /* block label */
  --fs-lead:    20px;
  --fs-body:    18px;
  --fs-small:   15px;
  --fs-label:   12px;
  --fs-stat:    72px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-body:    1.55;

  /* ---------- Radii / spacing / shadow ---------- */
  --r-card: 4px;
  --r-pill: 999px;
  --r-md:   8px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --shadow-1: 0 1px 2px rgba(23,71,158,.06);
  --shadow-2: 0 8px 24px rgba(23,71,158,.10);

  --tick-w: 4px;

  --ease-out: cubic-bezier(.2,.7,.2,1);
  --dur-1: 180ms;
  --dur-2: 240ms;
}

/* ---------- Base ---------- */
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Semantic typography ---------- */
.r-cover {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-cover);
  line-height: var(--lh-tight);
  color: #fff;
  letter-spacing: 0.01em;
}

/* SLIDE TITLE.  — navy + green dot */
.r-h1, h1.r {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: 0.02em;
  color: var(--rubix-navy);
  text-transform: uppercase;
  margin: 0 0 var(--space-5);
}
.r-h1::after, h1.r::after { content: "."; color: var(--rubix-green); }

/* Heading 2 — Sub-section */
.r-h2, h2.r {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--rubix-navy);
  margin: 0 0 var(--space-4);
}

/* Heading 3 — block label, accent-coloured */
.r-h3, h3.r {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--rubix-green);
  margin: 0 0 var(--space-3);
}

/* Section label with 4px left tick — use --tick-color to set the tick */
.r-section-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tick-color, var(--rubix-navy));
  padding-left: var(--space-3);
  position: relative;
  display: inline-block;
}
.r-section-label::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: var(--tick-w);
  height: 1.4em;
  background: var(--tick-color, var(--rubix-navy));
}

/* Lead paragraph */
.r-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  color: var(--fg-1);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
}

/* Body */
p, .r-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg-1);
  line-height: var(--lh-body);
  text-align: left;
}
.r-muted { color: var(--fg-2); }

/* Caption / label */
.r-caption {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.r-label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

/* Stat */
.r-stat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-stat);
  line-height: 1;
  color: var(--rubix-navy);
  letter-spacing: -0.01em;
}

/* Call-out pill */
.r-pill {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: var(--rubix-red);
  color: #fff;
  font-family: var(--font-pill);
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 14px;
}

/* Link */
a, .r-link {
  color: var(--rubix-cyan);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-1) var(--ease-out);
}
a:hover, .r-link:hover { border-bottom-color: var(--rubix-cyan); }

/* Card / panel */
.r-card {
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}
.r-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

/* Button */
.r-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  padding: 12px 22px;
  border-radius: var(--r-md);
  background: var(--rubix-navy);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform 90ms var(--ease-out);
}
.r-btn:hover { background: var(--rubix-navy-700); }
.r-btn:active { transform: scale(0.98); }
.r-btn--ghost {
  background: transparent;
  color: var(--rubix-navy);
  border: 1.5px solid var(--rubix-navy);
}
.r-btn--ghost:hover { background: var(--rubix-navy-50); }
.r-btn--accent {
  background: var(--rubix-green);
}
.r-btn--accent:hover { background: var(--rubix-green-600); }

/* Table */
.r-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); }
.r-table th {
  background: var(--rubix-navy); color: #fff; font-weight: 700;
  text-align: left; padding: 12px 14px; border: 1px solid var(--hairline);
}
.r-table td {
  padding: 12px 14px; border: 1px solid var(--hairline); color: var(--fg-1);
}
.r-table td.r-emph { color: var(--rubix-navy); font-weight: 700; text-align: right; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--rubix-navy);
  outline-offset: 2px;
}