/* ============================================================
   THRIVE STEAM   Design Tokens  v5.1
   Fonts: DM Sans throughout + Inter for UI
   + DM Sans (body) + Inter (UI/nav)
   All sans-serif: DM Sans + Inter
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400;1,9..40,500&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand colours from the brand deck */
  --c-orange:     #FF6B35;
  --c-blue:       #38BDF8;
  --c-yellow:     #FFD93D;
  --c-green:      #34C759;
  --c-violet:     #A855F7;
  --c-navy:       #1A1A2E;

  /* Aliases used throughout */
  --c-sky:        #38BDF8;
  --c-sky-light:  #EAF7FD;
  --c-coral:      #FF6B35;
  --c-sun:        #FFD93D;
  --c-leaf:       #34C759;
  --c-lavender:   #A855F7;
  --c-amber:      #FFD93D;

  /* Neutrals */
  --c-ink:        #1A1A2E;
  --c-ink-80:     rgba(26,26,46,.82);
  --c-ink-60:     rgba(26,26,46,.62);
  --c-ink-40:     rgba(26,26,46,.42);
  --c-ink-20:     rgba(26,26,46,.16);
  --c-ink-10:     rgba(26,26,46,.08);
  --c-paper:      #FDFAF5;
  --c-cream:      #F5EFE3;
  --c-white:      #FFFFFF;

  /*
    FONT STRATEGY (confirmed from brand deck + thoughts doc):
    - Hero H1:          DM Sans 600
    - Section headings: DM Sans 600
    - Body text:        DM Sans                  (clean, readable)
    - Nav / UI labels:  Inter                    (precise, functional)
  */
  /*
    CONFIRMED FONT HIERARCHY (brand deck + thoughts doc):
    --f-display  = DM Sans 600: hero H1, section H2, large display.
    --f-heading  = DM Sans 600: section titles.
    --f-card     = DM Sans 700: card h3, team names, activity titles, FAQ questions.
    --f-body     = DM Sans 400: all body paragraphs.
    --f-ui       = Inter: nav, labels, tags, buttons, captions.
  */
  --f-display:    'DM Sans', system-ui, sans-serif;
  --f-heading:    'DM Sans', system-ui, sans-serif;
  --f-card:       'DM Sans', system-ui, sans-serif;
  --f-body:       'DM Sans', system-ui, sans-serif;
  --f-ui:         'Inter', system-ui, sans-serif;

  /* Spacing */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* Radii */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 1px 3px rgba(0,0,0,.04), 0 2px 12px rgba(0,0,0,.05);
  --shadow-lift: 0 4px 24px rgba(0,0,0,.09);
  --shadow-pop:  0 12px 48px rgba(0,0,0,.14);
}

@font-face {
  font-family: 'Syne-Logo';
  font-weight: 800;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/syne/v22/8vIS7w4qzmVxsWxjBZRjr0FKM_04uT6kR47NCV5Z.woff2') format('woff2');
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: var(--f-body);
  background: var(--c-paper);
  color: var(--c-ink);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { list-style: none; }
.ui-label {
  font-family: var(--f-ui);
  font-size: .72rem; font-weight: 500;
  letter-spacing: 1.6px; text-transform: uppercase;
}

/* ── BLUE ACCENT WORD ── */
/* Wrap any word in <span class="blue">word</span> to make it sky blue */
.blue {
  color: var(--c-sky);
}