/* Junie site tokens, copied from design_handoff_junie_site/ (README + tokens/).
   Only what this page uses. The site never imports the app's design system. */
:root {
  /* Grounds */
  --cream-50: #FFFCF7;
  --calm-50: #F6F9F8;
  --calm-400: #AEBFBA;
  --accent-sky-200: #D0E0E6;
  --white: #FFFFFF;

  /* Jade */
  --primary-500: #1FA98C;
  --primary-600: #15876F;
  --signal-press: #168572;
  --signal-ink: #07291F;
  --signal-wash: #E4F4F1;
  --on-primary: #EEF1F0;

  /* Ink */
  --color-text: #161F1C;
  --color-text-body: #26302D;
  --color-text-quiet: #54635E;
  --color-text-muted: #748581;

  /* Surfaces and lines */
  --color-surface: #EAF0EE;
  --color-border-soft: #DCE5E2;
  --color-border: #C6D2CE;

  /* Accents */
  --accent-lilac-100: #EFEEF4;
  --accent-lilac-700: #332B7F;
  --error: #E0452B;
  --faq-chevron: #2F7E61;

  /* Transcript highlight pills */
  --pill-sky: #B4DCE8;
  --pill-lilac: #C8C3EE;
  --pill-green: #B2E7C9;
  --pill-lime: #D2E89C;
  --pill-grey: #DCE5E2;
  --pill-cream: #F3ECD8;

  /* Elevation */
  --shadow-sm: 0 2px 10px rgba(22, 31, 28, .06);
  --shadow-md: 0 8px 30px rgba(22, 31, 28, .09);
  --shadow-lg: 0 18px 50px rgba(22, 31, 28, .14);
  --hairline: inset 0 0 0 1px var(--color-border-soft);
  --focus-ring: 0 0 0 3px rgba(31, 169, 140, .25);

  /* Motion */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-accordion: 300ms;

  /* Type */
  --font-display: "Fraunces", "Manrope", Georgia, serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --content-max: 1160px;
  --gutter: 28px;
}