/* ============================================================
   Rewriting the Code — Colors & Type
   Source of truth: RTC Brand Compass Book 2025 (alfacharlie.co)
   ============================================================ */

/* ------------------------------------------------------------
   FONTS
   Manuka Condensed Bold = H1, display, eyebrow bubble text
   Attila Sans Uniform Semibold = available as alt sans-serif
   Inter = H2–H6, body, UI (brand's working type)
   ------------------------------------------------------------ */

@font-face {
  font-family: "Manuka Condensed";
  src: url("../fonts/ManukaCondensed-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Attila Sans";
  src: url("../fonts/AttilaSansUniform-Semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Inter via Google Fonts — primary working type per brand guide */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* ---------- CORE PALETTE ---------- */
  --rtc-beige: #E3CFB8;       /* PMS 4755  — ground / bg */
  --rtc-cadmium: #FF8D2D;     /* PMS 151   — supporting accent */
  --rtc-orange: #FF5900;      /* PMS 021   — HERO, CTAs only */
  --rtc-burgundy: #50142F;    /* PMS 222   — headers, dark bg */
  --rtc-white: #FFFFFF;

  /* ---------- SECONDARY PALETTE ---------- */
  --rtc-dark-beige: #C0A98B;  /* PMS 2312 */
  --rtc-black: #1F1B1A;       /* PMS Black 3 — sub-brand only */
  --rtc-yellow: #FCF66A;      /* PMS 602 */
  --rtc-brown: #572A1D;       /* PMS 477  — sub-brand dark */
  --rtc-pink: #FC92B0;        /* PMS 2037 */
  --rtc-turquoise: #6EE7CF;   /* PMS 7471 */
  --rtc-cryo-blue: #40BDD6;   /* PMS 305 */
  --rtc-deep-slate: #39394E;  /* PMS 5275 — early career dark */
  --rtc-cyber-green: #94FD82; /* PMS 2267 */
  --rtc-green: #56D28D;       /* PMS 7479 */
  --rtc-petrol: #00646C;      /* PMS 7474 — early career accent */

  /* ---------- SEMANTIC TOKENS (default/main brand) ---------- */
  --bg: var(--rtc-beige);
  --bg-alt: var(--rtc-white);
  --bg-dark: var(--rtc-burgundy);
  --surface: var(--rtc-white);

  --fg: var(--rtc-black);           /* body on light */
  --fg-on-dark: var(--rtc-white);   /* body on dark */
  --fg-muted: color-mix(in srgb, var(--rtc-black) 70%, transparent);
  --fg-heading: var(--rtc-burgundy);
  --fg-heading-on-dark: var(--rtc-white);

  --accent: var(--rtc-orange);      /* CTAs, links */
  --accent-soft: var(--rtc-cadmium);

  --border: var(--rtc-burgundy);
  --border-thin: 1px solid var(--rtc-burgundy);
  --border-card: 2px solid var(--rtc-burgundy);

  /* Signature shadow-box drop (solid, no blur) */
  --shadow-box: 3px 4px 0 0 var(--rtc-burgundy);
  --shadow-box-inv: 3px 4px 0 0 var(--rtc-white);

  /* ---------- RADII ---------- */
  --radius-card: 20px;    /* shadow box cards */
  --radius-pill: 100px;   /* buttons */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* ---------- SPACING ---------- */
  --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;

  --card-padding: 50px;   /* brand minimum for shadow boxes */

  /* ---------- TYPEFACES ---------- */
  --font-display: "Manuka Condensed", "Oswald", "Arial Narrow", sans-serif; /* H1 */
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;               /* H2–H6, body */
  --font-alt: "Attila Sans", "Inter", sans-serif;                           /* optional alt */
}

/* ------------------------------------------------------------
   TYPOGRAPHIC SCALE
   Per brand guide:
   H1  = Manuka Condensed Bold, ALL CAPS, tight word-spacing
   H2  = Inter Bold, Sentence case, letter-spacing -0.01em (-10 tracking)
   H3-H5 = Inter SemiBold, Sentence case
   H6  = Inter SemiBold, ALL CAPS (eyebrow)
   Body = Inter Regular, Sentence case
   Bubble text = Manuka Condensed Bold, ALL CAPS, rotated 12deg
   ------------------------------------------------------------ */

.rtc-h1, h1 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  word-spacing: 0.15em;
  color: var(--fg-heading);
  text-wrap: balance;
}

.rtc-h2, h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-heading);
  text-wrap: balance;
}

.rtc-h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.2;
  color: var(--fg-heading);
}

.rtc-h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg-heading);
}

.rtc-h5, h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--fg-heading);
}

.rtc-h6, h6, .rtc-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rtc-cadmium);
}

.rtc-body, p, body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
}

.rtc-body-lg { font-size: 18px; line-height: 1.5; }
.rtc-body-sm { font-size: 14px; line-height: 1.5; }

.rtc-bubble {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 0.02em;
  background: var(--rtc-white);
  color: var(--rtc-burgundy);
  padding: 8px 18px 6px;
  border-radius: 100px;
  transform: rotate(-12deg);
}
.rtc-bubble--on-dark { background: var(--rtc-beige); }

/* ------------------------------------------------------------
   SHADOW BOX (signature card)
   ------------------------------------------------------------ */
.rtc-shadow-box {
  background: var(--rtc-white);
  border: var(--border-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-box);
  padding: var(--card-padding);
}
.rtc-shadow-box--on-dark {
  border: none;
  box-shadow: none;
}

/* ------------------------------------------------------------
   BUTTONS (pill-shaped, solid shadow)
   ------------------------------------------------------------ */
.rtc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  padding: 16px 25px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rtc-burgundy);
  box-shadow: 3px 4px 0 0 var(--rtc-burgundy);
  cursor: pointer;
  text-decoration: none;
  transition: transform .08s ease, box-shadow .08s ease;
}
.rtc-btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 5px 0 0 var(--rtc-burgundy); }
.rtc-btn:active { transform: translate(3px, 4px); box-shadow: 0 0 0 0 var(--rtc-burgundy); }

.rtc-btn--primary { background: var(--rtc-orange); color: var(--rtc-white); border-color: var(--rtc-burgundy); }
.rtc-btn--secondary { background: var(--rtc-white); color: var(--rtc-burgundy); }
.rtc-btn--sm { padding: 10px 20px; font-size: 14px; }

/* ------------------------------------------------------------
   SECTION DIVIDER
   ------------------------------------------------------------ */
.rtc-divider { border: 0; border-top: 2px solid var(--rtc-burgundy); margin: 48px 0; }

/* ------------------------------------------------------------
   SUB-BRAND PALETTE OVERRIDES
   Drop .rtc-sub-black-wings, etc. on a root container to remap.
   Per brand: primary dark swaps; RTC Orange always stays CTA.
   ------------------------------------------------------------ */
.rtc-sub-black-wings { --bg-dark: var(--rtc-black); --fg-heading: var(--rtc-black); --border: var(--rtc-black); --accent-soft: var(--rtc-dark-beige); }
.rtc-sub-latinas      { --bg-dark: var(--rtc-brown); --fg-heading: var(--rtc-brown); --border: var(--rtc-brown); --accent-soft: var(--rtc-pink); }
.rtc-sub-tech-natives { --bg-dark: var(--rtc-brown); --fg-heading: var(--rtc-brown); --border: var(--rtc-brown); --accent-soft: var(--rtc-turquoise); }
.rtc-sub-early-career { --bg: var(--rtc-white); --bg-dark: var(--rtc-deep-slate); --fg-heading: var(--rtc-deep-slate); --border: var(--rtc-deep-slate); --accent-soft: var(--rtc-petrol); }
.rtc-sub-rewrite-ai   { --accent-soft: var(--rtc-green); }