/* Beaming brand tokens and base components.
   Matches the landing page palette (cream page, forest green bands, gold buttons). */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700&family=Caveat:wght@600&display=swap');

:root {
  /* Colour */
  --bm-cream: #FBFAF3;      /* page background */
  --bm-white: #FFFFFF;      /* cards, the speech bubble */
  --bm-forest: #12211C;     /* all text, dark bands, dark buttons, the forest logo tile */
  --bm-gold: #F5B201;       /* primary button and the sun. Nothing else. */
  --bm-gold-deep: #D28F00;  /* shading under gold, never a flat fill */
  --bm-pale: #FFF3CC;       /* tinted sections and the pale logo tile */
  --bm-muted: #3E4A45;      /* secondary text on cream */

  /* Type */
  --bm-font: 'Outfit', system-ui, sans-serif;
  --bm-hand: 'Caveat', cursive;

  /* Shape */
  --bm-radius-card: 24px;
  --bm-radius-panel: 32px;
  --bm-radius-pill: 999px;

  /* Depth */
  --bm-shadow-card: 0 18px 40px rgba(18, 33, 28, 0.14);
  --bm-shadow-button: 0 10px 24px rgba(245, 178, 1, 0.35), inset 0 -5px 0 rgba(0, 0, 0, 0.12);
}

body { margin: 0; background: var(--bm-cream); color: var(--bm-forest); font-family: var(--bm-font); font-size: 18px; line-height: 1.5; }
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 0.5em; }
h1 { font-size: clamp(40px, 6vw, 66px); }
h2 { font-size: clamp(30px, 4vw, 44px); }
h3 { font-size: 24px; }
p { margin: 0 0 1em; }
a { color: var(--bm-forest); }

/* Dark band: forest background, cream text */
.bm-band { background: var(--bm-forest); color: var(--bm-cream); }
.bm-band a { color: var(--bm-cream); }

/* Handwritten aside: short phrases only */
.bm-hand { font-family: var(--bm-hand); font-weight: 600; font-size: 26px; line-height: 1; }

/* Buttons */
.bm-btn, .bm-btn-dark { display: inline-block; border-radius: var(--bm-radius-pill); text-decoration: none; font-weight: 700; font-size: 19px; padding: 17px 32px; min-height: 44px; box-sizing: border-box; }
.bm-btn { background: var(--bm-gold); color: var(--bm-forest); box-shadow: var(--bm-shadow-button); }
.bm-btn:hover { background: #FFC53A; }
.bm-btn-dark { background: var(--bm-forest); color: var(--bm-cream); font-weight: 600; font-size: 16px; padding: 12px 24px; }
.bm-btn-dark:hover { background: #203A31; }

/* Cards and panels */
.bm-card { background: var(--bm-white); border-radius: var(--bm-radius-card); padding: 16px 20px; box-shadow: var(--bm-shadow-card); }
.bm-panel { background: var(--bm-white); border-radius: var(--bm-radius-panel); padding: 32px 40px; }
.bm-section-pale { background: var(--bm-pale); }
.bm-stat { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.bm-stat-label { font-size: 14px; }

/* Nav lockup: badge plus wordmark. Use beaming-badge.svg on cream, beaming-badge-reversed.svg on forest. */
.bm-lockup { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.bm-lockup img { width: 44px; height: 44px; display: block; }
.bm-lockup span { font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; }