/* ==========================================================================
   RedBit Design System — Colors & Type
   ==========================================================================
   Source of truth for tokens. Import this everywhere.

   Brand: RedBit Development. Visual system anchored on a navy field with
   a single, unmistakable red accent. Type uses the full Microsoft Aptos
   family — sans (default), Display (tight optical for headlines), Narrow
   (condensed accents), Serif (long-form), Mono (code/numerics).
   ========================================================================== */

/* --- Webfonts ----------------------------------------------------------- */

/* ---------- Aptos (default body sans) ---------- */
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Light-Italic.ttf") format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-SemiBold-Italic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-ExtraBold.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-ExtraBold-Italic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Black.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos"; src: url("../fonts/Aptos-Black-Italic.ttf") format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

/* ---------- Aptos Display (tight optical for headlines) ---------- */
@font-face { font-family: "Aptos Display"; src: url("../fonts/Aptos-Display.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Display"; src: url("../fonts/Aptos-Display-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos Display"; src: url("../fonts/Aptos-Display-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Display"; src: url("../fonts/Aptos-Display-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Aptos Narrow (condensed) ---------- */
@font-face { font-family: "Aptos Narrow"; src: url("../fonts/Aptos-Narrow.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Narrow"; src: url("../fonts/Aptos-Narrow-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos Narrow"; src: url("../fonts/Aptos-Narrow-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Narrow"; src: url("../fonts/Aptos-Narrow-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Aptos Serif (long-form / formal) ---------- */
@font-face { font-family: "Aptos Serif"; src: url("../fonts/Aptos-Serif.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Serif"; src: url("../fonts/Aptos-Serif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos Serif"; src: url("../fonts/Aptos-Serif-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Serif"; src: url("../fonts/Aptos-Serif-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* ---------- Aptos Mono ---------- */
@font-face { font-family: "Aptos Mono"; src: url("../fonts/Aptos-Mono.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Mono"; src: url("../fonts/Aptos-Mono-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Aptos Mono"; src: url("../fonts/Aptos-Mono-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aptos Mono"; src: url("../fonts/Aptos-Mono-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

/* --- Color tokens ------------------------------------------------------- */
:root {
  /* Brand primaries — pulled directly from moodboard + deck */
  --rb-red: #D42127;          /* Primary brand red — accents, CTAs, highlights */
  --rb-red-deep: #B01A1F;     /* Hover / pressed state */
  --rb-red-soft: #F4D2D4;     /* Subtle backgrounds, badges */
  --rb-red-tint: #FBEBEC;     /* Faintest red wash */

  --rb-navy: #003049;         /* Primary dark — slide backgrounds, type on light */
  --rb-navy-deep: #001E2F;    /* Pressed / deeper navy */
  --rb-navy-soft: #1A4763;    /* Cards on navy field */

  --rb-cream: #EDF2F4;        /* Off-white — type on dark, soft surfaces */
  --rb-cream-warm: #F7FAFB;   /* Slightly warmer cream */
  --rb-paper: #FFFFFF;        /* True white */

  --rb-steel-100: #EDF2F4;
  --rb-steel-200: #DDE3E7;
  --rb-steel-300: #C5CDD3;
  --rb-steel-400: #8D99AE;    /* Mid gray — secondary copy, eyebrow labels */
  --rb-steel-500: #6B7689;
  --rb-steel-600: #4A4A4A;    /* Body copy on light bg (per deck) */
  --rb-steel-700: #2D2D2D;
  --rb-steel-900: #0A0A0A;

  /* Semantic foreground / background */
  --fg-1: var(--rb-steel-900);   /* Primary text on light */
  --fg-2: var(--rb-steel-600);   /* Body text on light */
  --fg-3: var(--rb-steel-400);   /* Tertiary / labels */
  --fg-on-dark-1: var(--rb-cream);
  --fg-on-dark-2: var(--rb-steel-300);
  --fg-on-dark-3: var(--rb-steel-400);

  --bg-1: var(--rb-paper);      /* Primary surface — content slides */
  --bg-2: var(--rb-cream);      /* Subtle surface */
  --bg-3: var(--rb-steel-200);  /* Hairline cards */
  --bg-dark-1: var(--rb-navy);  /* Primary dark — covers, section dividers */
  --bg-dark-2: var(--rb-navy-soft);

  --accent: var(--rb-red);
  --accent-hover: var(--rb-red-deep);

  /* Status (derived — no canonical brand spec) */
  --status-ok: #2E8B57;
  --status-warn: #E1A100;
  --status-info: #1E6FB6;

  /* Hairlines and dividers */
  --rule-light: rgba(10, 10, 10, 0.10);
  --rule-soft:  rgba(10, 10, 10, 0.06);
  --rule-dark:  rgba(237, 242, 244, 0.16);

  /* --- Type tokens ----------------------------------------------------- */
  --font-display: "Aptos Display", "Aptos", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-narrow:  "Aptos Narrow", "Aptos", "Segoe UI Condensed", system-ui, sans-serif;
  --font-serif:   "Aptos Serif", Georgia, "Times New Roman", serif;
  --font-mono:    "Aptos Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Scale — tuned for slides (1280×720 → 1920×1080) and for product UI */
  --fs-display-xl: 72px;   /* Cover slides */
  --fs-display-lg: 56px;
  --fs-display-md: 44px;   /* Section dividers, big stat numbers */
  --fs-display-sm: 32px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-h3: 18px;
  --fs-body-lg: 17px;
  --fs-body: 15px;
  --fs-body-sm: 13px;
  --fs-label: 12px;        /* Eyebrow / caps */
  --fs-micro: 11px;

  --lh-tight: 1.05;
  --lh-snug: 1.20;
  --lh-normal: 1.45;
  --lh-loose: 1.65;

  --tracking-display: -0.01em;  /* Aptos tightens nicely at large size */
  --tracking-body: 0em;
  --tracking-eyebrow: 0.18em;   /* spc=600 in pptx ≈ 0.18em letter-spacing */

  /* --- Spacing / radius / shadow -------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Restrained shadows — RedBit visual system favors hairlines + flat fills */
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04), 0 0 0 1px rgba(10,10,10,0.06);
  --shadow-2: 0 1px 2px rgba(10,10,10,0.05), 0 0 0 1px rgba(10,10,10,0.08);
  --shadow-3: 0 4px 12px -2px rgba(10,10,10,0.10), 0 0 0 1px rgba(10,10,10,0.06);
  --shadow-4: 0 18px 40px -12px rgba(0,48,73,0.30), 0 0 0 1px rgba(10,10,10,0.06);

  /* Slide layout — 16:9 fixed canvas */
  --slide-w: 1280px;
  --slide-h: 720px;
  --slide-pad-x: 80px;
  --slide-pad-y: 64px;
}

/* --- Semantic typography classes --------------------------------------- */
/* Use these directly (`<h1 class="rb-display">…`) or copy the rules. */

html, body { font-family: var(--font-body); color: var(--fg-1); }

.rb-display-xl,
.rb-display-lg,
.rb-display-md,
.rb-display-sm,
.rb-h1, .rb-h2, .rb-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

.rb-display-xl { font-size: var(--fs-display-xl); font-weight: 800; }
.rb-display-lg { font-size: var(--fs-display-lg); font-weight: 800; }
.rb-display-md { font-size: var(--fs-display-md); font-weight: 700; }
.rb-display-sm { font-size: var(--fs-display-sm); font-weight: 700; }

.rb-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-snug); }
.rb-h2 { font-size: var(--fs-h2); font-weight: 600; line-height: var(--lh-snug); }
.rb-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: var(--lh-snug); }

.rb-body-lg, .rb-body, .rb-body-sm, .rb-micro {
  font-family: var(--font-body);
  margin: 0;
  text-wrap: pretty;
}
.rb-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-normal); color: var(--fg-2); }
.rb-body    { font-size: var(--fs-body);    line-height: var(--lh-normal); color: var(--fg-2); }
.rb-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal); color: var(--fg-2); }
.rb-micro   { font-size: var(--fs-micro);   line-height: var(--lh-normal); color: var(--fg-3); }

/* Eyebrow / caps label — the deck's signature treatment */
.rb-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0;
}

.rb-eyebrow--red { color: var(--rb-red); }
.rb-eyebrow--cream { color: var(--rb-cream); }

.rb-mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "ss01";
  font-size: var(--fs-body-sm);
}

/* --- Utility classes --------------------------------------------------- */
.rb-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-display-md);
  line-height: 1;
  color: var(--rb-navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.rb-stat-num--red { color: var(--rb-red); }
.rb-stat-num--cream { color: var(--rb-cream); }

.rb-rule { border: 0; border-top: 1px solid var(--rule-light); margin: 0; }
.rb-rule--strong { border-top-color: var(--rb-navy); }
.rb-rule--red { border-top: 2px solid var(--rb-red); }

/* Confidential / status capsule — used in the proposal deck */
.rb-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.rb-tag--confidential { color: var(--rb-red); border: 1px solid var(--rb-red); }
.rb-tag--solid-red    { color: #fff; background: var(--rb-red); }
.rb-tag--ghost        { color: var(--fg-3); border: 1px solid var(--rule-light); }