@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

:root {
  /* Blues */
  --blue-900: #1a2c5e;
  --blue-700: #3a55a0;
  --blue-600: #4666ba;
  --blue-500: #4b7fd2;
  --blue-400: #7ca2de;
  --blue-300: #acbde7;
  --blue-100: #e7edfb;
  --blue-tint-10: rgba(70,102,186,0.08);

  /* Corals */
  --coral-700: #d14249;
  --coral-600: #f4676e;
  --coral-400: #f8a0a5;
  --coral-300: #fbc0c3;

  /* Yellow */
  --yellow-500: #fdc951;

  /* Ink / neutrals */
  --ink-900: #0e1913;
  --ink-700: #1e2d27;
  --ink-500: #4d6059;
  --green-50: #f0f7f2;
  --grey-300: #d0d5dd;

  /* Backgrounds */
  --white: #ffffff;
  --off-white: #f4f7ff;
  --paper: #f7f9ff;

  /* Typography */
  --font-sans: 'Montserrat', sans-serif;
  --weight-bold: 700;
  --weight-medium: 500;
  --type-h1: 700 64px/1.1 'Montserrat', sans-serif;
  --type-h2: 700 40px/1.15 'Montserrat', sans-serif;
  --type-h3: 700 28px/1.25 'Montserrat', sans-serif;
  --type-body: 500 16px/1.6 'Montserrat', sans-serif;
  --type-label: 700 14px/1 'Montserrat', sans-serif;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(14,25,19,.08), 0 1px 2px rgba(14,25,19,.04);
  --shadow-md: 0 4px 12px rgba(14,25,19,.10), 0 2px 4px rgba(14,25,19,.06);
  --shadow-card: 0 6px 24px rgba(14,25,19,.08), 0 2px 6px rgba(14,25,19,.05);
  --shadow-lg: 0 16px 48px rgba(14,25,19,.12), 0 4px 12px rgba(14,25,19,.07);

  /* Keylines */
  --keyline-soft: 0 0 0 2px rgba(70,102,186,.18);
  --keyline-coral: inset 0 0 0 2px var(--coral-600);

  /* Motion */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --ease-soft: cubic-bezier(.25,.1,.25,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font: var(--type-body);
  color: var(--ink-700);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }