/* ==========================================================================
   TYPOGRAPHY CONTROL CENTER (LOCKED PER DESIGN CONTRACT)
   --------------------------------------------------------------------------
   Editorial prose (default body): Lora
   Editorial headings (h1–h6):     Inter
   UI + SaaS/dashboarding:          IBM Plex Sans
   ========================================================================== */

:root {
  /* --- BRAND COLOURS --- */
  --colour-navy: #002D40;
  --colour-green: #1D9A44;

  /* Amber Accent */
  --colour-amber: #FFBF00;
  --colour-amber-dark: #E6AC00;
  --cta-accent: #f0b429;

  /* --- TYPE ROLES (LOCKED) --- */
  --font-editorial-prose: 'Lora Var', serif;
  --font-editorial-heading: 'Inter Var', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-ui: 'IBM Plex Sans Var', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --heading-weight: 700;
  --body-weight: 400;

  /* Keep as “scale” (Tarapro sometimes expects this style of token) */
  --body-size-adjust: 100%;

  /* Tarapro compatibility aliases (prevents theme vars drifting to Open Sans/Roboto) */
  --font-heading: var(--font-editorial-heading);
  --font-text: var(--font-editorial-prose);
}

/* ==========================================================================
   EDITORIAL DEFAULTS (BROCHURE MODE BASELINE)
   ========================================================================== */

body {
  font-family: var(--font-editorial-prose);
  font-weight: var(--body-weight);
  font-size: var(--body-size-adjust);
  line-height: 1.6;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-editorial-heading);
  color: var(--colour-navy);
  font-weight: var(--heading-weight);
  letter-spacing: -0.02em; /* optional: “Executive Tension” */
  line-height: 1.2;
}

/* ==========================================================================
   UI ELEMENTS (BUTTONS / CONTROLS) — IBM PLEX (GLOBAL)
   ========================================================================== */

.button,
.btn,
.btn-primary,
input,
select,
textarea,
label {
  font-family: var(--font-ui);
}

.button,
.btn-primary {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  background-color: var(--colour-green);
}

/* Amber CTA modifier */
.button.cta-accent,
.btn-amber {
  background-color: var(--colour-amber) !important;
  color: var(--colour-navy) !important;
  font-weight: 700;
  border: none;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.button.cta-accent:hover,
.btn-amber:hover {
  background-color: var(--colour-amber-dark) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* ==========================================================================
   SAAS / DASHBOARD MODE — IBM PLEX OVERRIDES EVERYTHING INSIDE WRAPPER
   ========================================================================== */

.saas-portal-outer-wrapper {
  font-family: var(--font-ui);
}

.saas-portal-outer-wrapper h1,
.saas-portal-outer-wrapper h2,
.saas-portal-outer-wrapper h3,
.saas-portal-outer-wrapper h4,
.saas-portal-outer-wrapper h5,
.saas-portal-outer-wrapper h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: 0; /* removes editorial “tension” in dashboards */
}

/* SaaS Specific Labels */
.data-label,
.pillar-title-saas {
  font-family: var(--font-ui) !important;
  text-transform: uppercase;
  font-size: 0.85rem;
}