/* ═══════════════════════════════════════════════════════════════
   GLOBAL MAYORS ACADEMY — Foundations
   Swiss Red + White scheme. Editorial / civic / institutional.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,700;1,400;1,500&display=swap');
/* Brand fonts: Georgia (system serif, ships with all OSes) + DM Sans (Google). */

:root {
  /* ─── BRAND CORE ──────────────────────────────────────── */
  --gma-red:        #D52B1E;   /* Swiss red — primary brand */
  --gma-red-dark:   #8B1A13;   /* Hero gradient mid */
  --gma-red-deep:   #6B1410;   /* Hero gradient stop / door 1 */
  --gma-red-darker: #5C1410;   /* Founding cohort core */
  --gma-red-near-black: #3a0b08;
  --gma-red-hover:  #B82518;   /* Button hover */
  --gma-pill:       rgba(139,26,19,0.9);

  /* ─── NEUTRALS / PARCHMENT ────────────────────────────── */
  --gma-parchment:    #FAF9F6;   /* page bg on light sections */
  --gma-parchment-dk: #EDE9E4;   /* hover / alternate light bg */
  --gma-cream-card:   #ffffff;
  --gma-cream-hover:  #fdfaf5;
  --gma-ink:          #2A2B2A;   /* primary text on light */
  --gma-ink-mid:      #454745;   /* secondary text on light */
  --gma-ink-dim:      #7D7067;   /* tertiary text on light */
  --gma-footer-bg:    #dcdddc;

  /* ─── ON-RED (alpha-white) ─────────────────────────────── */
  --gma-on-red:        rgba(255,255,255,0.97);
  --gma-on-red-mid:    rgba(255,255,255,0.80);
  --gma-on-red-dim:    rgba(255,255,255,0.60);
  --gma-on-red-faint:  rgba(255,255,255,0.42);
  --gma-on-red-ghost:  rgba(255,255,255,0.08);
  --gma-ac-border:     rgba(255,255,255,0.25);
  --gma-ac-pale:       rgba(255,255,255,0.12);
  --gma-ac-quote:      rgba(255,255,255,0.22);

  /* ─── SEMANTIC FG / BG ─────────────────────────────────── */
  --fg1: var(--gma-ink);          /* primary on light */
  --fg2: var(--gma-ink-mid);
  --fg3: var(--gma-ink-dim);
  --bg1: var(--gma-parchment);
  --bg2: var(--gma-parchment-dk);
  --bg-card: var(--gma-cream-card);
  --bg-red: var(--gma-red);

  /* ─── ACCENTS ON LIGHT (red tints) ─────────────────────── */
  --red-tint-06: rgba(213,43,30,0.06);
  --red-tint-08: rgba(213,43,30,0.08);
  --red-tint-10: rgba(213,43,30,0.10);
  --red-tint-15: rgba(213,43,30,0.15);
  --red-tint-25: rgba(213,43,30,0.25);

  /* ─── GRADIENTS / TEXTURE OVERLAYS ─────────────────────── */
  --grad-hero:     linear-gradient(160deg, #8B1A13 0%, #D52B1E 50%, #6B1410 100%);
  --grad-founding: radial-gradient(ellipse 80% 100% at 40% 60%, #8B1A13 0%, #5C1410 30%, #3a0b08 60%, #1a0504 100%);
  --grad-hero-veil: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);

  /* ─── TYPE FAMILIES ────────────────────────────────────── */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  /* ─── SPACING SCALE (linear, 4px base) ─────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  28px;
  --sp-7:  36px;
  --sp-8:  48px;
  --sp-9:  64px;
  --sp-10: 80px;
  --sp-11: 100px;
  --sp-12: 120px;

  /* ─── RADII ─────────────────────────────────────────────
     GMA is largely RADIUS-FREE. Square edges are part of the
     editorial / Swiss aesthetic. The only rounded shapes are
     avatars (circles) and the gold tag pill. */
  --radius-0:     0px;     /* default — cards, buttons, inputs */
  --radius-pill:  999px;   /* avatars, gold tag */

  /* ─── BORDERS / RULES ──────────────────────────────────── */
  --rule-on-light:    1px solid rgba(42,43,42,0.08);
  --rule-on-light-md: 1px solid rgba(42,43,42,0.20);
  --rule-on-red:      1px solid rgba(255,255,255,0.12);
  --rule-on-red-md:   1px solid rgba(255,255,255,0.25);
  --accent-border-red: 2px solid var(--gma-red);

  /* ─── SHADOWS — used VERY sparingly ────────────────────── */
  --shadow-sm: 0 1px 3px rgba(42,43,42,0.06);
  --shadow-md: 0 4px 12px rgba(42,43,42,0.10);
  --shadow-lg: 0 12px 32px rgba(42,43,42,0.14);
  /* GMA prefers borders + 2px-top accent rules over drop shadows. */

  /* ─── MOTION ───────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-1: 0.20s;     /* button / link hover */
  --dur-2: 0.30s;     /* bg color shifts */
  --dur-3: 0.40s;     /* underline grow / image filter */
  --dur-4: 0.65s;     /* fade-in entry */

  /* ─── TYPE TOKENS ──────────────────────────────────────── */
  /* Display / Editorial */
  --t-display-size: clamp(44px, 5.5vw, 65px);
  --t-display-lh:   1.15;
  --t-display-ls:   -0.01em;

  --t-h1-size: clamp(28px, 4vw, 50px);
  --t-h1-lh:   1.2;

  --t-h2-size: clamp(26px, 3.8vw, 48px);
  --t-h2-lh:   1.2;

  --t-h3-size: clamp(19px, 2vw, 24px);
  --t-h3-lh:   1.3;

  --t-pull-quote-size: clamp(16px, 2.8vw, 30px);
  --t-pull-quote-lh:   1.65;

  /* Eyebrow / label — uppercase, tracked */
  --t-eyebrow-size: 12px;
  --t-eyebrow-ls:   0.22em;

  --t-section-label-size: 18px;
  --t-section-label-ls:   0.22em;

  /* Body */
  --t-body-size: clamp(14px, 1.5vw, 17px);
  --t-body-lh:   1.85;
  --t-body-weight: 300;

  --t-meta-size: clamp(11px, 1.2vw, 13px);
  --t-meta-ls:   0.10em;
}

/* ═══════════════════════════════════════════════════════════════
   SEMANTIC ELEMENT STYLES
   ═══════════════════════════════════════════════════════════════ */

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--fg1);
  background: var(--bg1);
}

.gma-display {
  font-family: var(--font-serif);
  font-size: var(--t-display-size);
  font-weight: 400;
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
}
.gma-display em { font-style: italic; }

h1, .gma-h1 {
  font-family: var(--font-serif);
  font-size: var(--t-h1-size);
  font-weight: 400;
  line-height: var(--t-h1-lh);
}
h2, .gma-h2 {
  font-family: var(--font-serif);
  font-size: var(--t-h2-size);
  font-weight: 400;
  line-height: var(--t-h2-lh);
}
h3, .gma-h3 {
  font-family: var(--font-serif);
  font-size: var(--t-h3-size);
  font-weight: 500;
  line-height: var(--t-h3-lh);
}

.gma-pull-quote {
  font-family: var(--font-serif);
  font-size: var(--t-pull-quote-size);
  font-style: italic;
  font-weight: 400;
  line-height: var(--t-pull-quote-lh);
}

.gma-eyebrow {
  font-size: var(--t-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase;
  color: var(--gma-red);
}

.gma-section-label {
  font-size: var(--t-section-label-size);
  font-weight: 500;
  letter-spacing: var(--t-section-label-ls);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.gma-section-label::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: currentColor;
}

p, .gma-body {
  font-family: var(--font-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-weight: var(--t-body-weight);
  color: var(--fg2);
}

.gma-meta {
  font-size: var(--t-meta-size);
  letter-spacing: var(--t-meta-ls);
  text-transform: uppercase;
  color: var(--fg3);
  font-weight: 400;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.gma-btn-primary {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gma-red);
  background: #ffffff;
  border: none;
  padding: 16px 36px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background var(--dur-1), color var(--dur-1), transform var(--dur-1);
}
.gma-btn-primary:hover {
  background: var(--gma-red);
  color: #ffffff;
  transform: translateY(-1px);
}

.gma-btn-primary--inverse {
  color: #ffffff;
  background: var(--gma-red);
}
.gma-btn-primary--inverse:hover {
  background: var(--gma-red-dark);
  color: #ffffff;
}

.gma-btn-ghost {
  font-size: 15px;
  color: var(--fg2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--dur-1), gap var(--dur-1);
}
.gma-btn-ghost::after { content: '→'; }
.gma-btn-ghost:hover { color: var(--gma-red); gap: 14px; }

.gma-link-uc {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-bottom: var(--rule-on-light-md);
  padding-bottom: 4px;
  transition: gap var(--dur-1), color var(--dur-1), border-color var(--dur-1);
}
.gma-link-uc:hover { color: var(--gma-red); border-color: var(--gma-red); gap: 16px; }

/* ═══════════════════════════════════════════════════════════════
   SURFACES — six named colour combinations.
   Apply with `data-surface="..."` on any section/block.
   Inside, use var(--bg / --ink / --ink-dim / --accent / --btn-bg /
   --btn-fg / --border) — all six surfaces expose the same names.
   ═══════════════════════════════════════════════════════════════ */

[data-surface] { background: var(--bg); color: var(--ink); }

[data-surface="parchment"] {
  --bg: #FAF9F6;  --ink: #2A2B2A;  --ink-dim: #454745;
  --accent: #D52B1E;  --btn-bg: #D52B1E;  --btn-bg-hover: #E84536;  --btn-fg: #fff;
  --border: rgba(42,43,42,0.10);
}
[data-surface="sand-light"] {
  --bg: #EDE3D2;  --ink: #3a2f1f;  --ink-dim: #5a4d3a;
  --accent: #D52B1E;  --btn-bg: #D52B1E;  --btn-bg-hover: #E84536;  --btn-fg: #fff;
  --border: rgba(60,40,20,0.12);
}
[data-surface="sand-deep"] {
  --bg: #E5D7BD;  --ink: #2e2415;  --ink-dim: #5a4830;
  --accent: #D52B1E;  --btn-bg: #2e2415;  --btn-bg-hover: #4a3a22;  --btn-fg: #E5D7BD;
  --border: rgba(46,36,21,0.15);
}
[data-surface="red"] {
  --bg: #D52B1E;  --ink: rgba(255,255,255,0.97);  --ink-dim: rgba(255,255,255,0.78);
  --accent: #fff;  --btn-bg: #fff;  --btn-bg-hover: #FFF6F4;  --btn-fg: #D52B1E;
  --border: rgba(255,255,255,0.18);
}
[data-surface="founding"] {
  --bg: radial-gradient(ellipse 80% 100% at 40% 60%, #8B1A13 0%, #5C1410 30%, #3a0b08 60%, #1a0504 100%);
  --ink: #fff;  --ink-dim: rgba(255,255,255,0.72);
  --accent: #C9A84C;  --btn-bg: #C9A84C;  --btn-bg-hover: #E2C063;  --btn-fg: #2a1a00;
  --border: rgba(255,255,255,0.12);
}
[data-surface="ink"] {
  --bg: #2A2B2A;  --ink: rgba(255,255,255,0.92);  --ink-dim: rgba(255,255,255,0.65);
  --accent: #D52B1E;  --btn-bg: #D52B1E;  --btn-bg-hover: #E84536;  --btn-fg: #fff;
  --border: rgba(255,255,255,0.10);
}

/* Default button — always brightens on hover, never darkens.
   Each surface defines --btn-bg-hover as a lighter sibling of --btn-bg. */
[data-surface] .btn,
[data-surface] button.gma-btn {
  background: var(--btn-bg); color: var(--btn-fg);
  border: none; padding: 14px 28px; cursor: pointer;
  font-size: 12px; font-weight: 500; letter-spacing: 0.10em; text-transform: uppercase;
  transition: background var(--dur-1), transform var(--dur-1);
}
[data-surface] .btn:hover,
[data-surface] button.gma-btn:hover {
  background: var(--btn-bg-hover);
  transform: translateY(-1px);
}