/* =========================================================
   Serendipity Solutions — Design Tokens
   Base palette inspired by "robin's egg blue" (teal/turquoise)
   + soft lavender accents + warm orange for call-to-action.
   ========================================================= */

:root {
  /* --- Brand: Teal (robin's egg) --- */
  --teal-50:  #EAF8F5;
  --teal-100: #D2F0E9;
  --teal-200: #A6E1D3;
  --teal-300: #7FD8C9;   /* base — "robin's egg" */
  --teal-400: #4FC4B0;
  --teal-500: #2AA998;
  --teal-600: #1F8576;
  --teal-700: #176356;
  --teal-800: #0F4439;

  /* --- Accent: Lavender --- */
  --lav-50:  #F4F0FA;
  --lav-100: #E5DCF2;
  --lav-200: #C9B8E2;
  --lav-300: #A88FCE;
  --lav-400: #8A6BB8;
  --lav-500: #6E4FA0;
  --lav-600: #533879;

  /* --- Call-to-action: Warm Orange --- */
  --orange-300: #FFB870;
  --orange-400: #FF9F47;
  --orange-500: #F58634;   /* primary CTA */
  --orange-600: #D86D1E;
  --orange-700: #A85317;

  /* --- Neutral --- */
  --ink-900: #0E1A1F;
  --ink-700: #2C3A40;
  --ink-500: #5C6E74;
  --ink-300: #93A4AB;
  --ink-100: #DDE5E8;
  --bg:      #FBFDFC;   /* near-white with a hint of teal */
  --surface: #FFFFFF;

  /* --- Semantic --- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-500);
  --border-subtle:  rgba(15, 68, 57, 0.10);
  --shadow-sm:  0 1px 2px rgba(15, 68, 57, 0.06), 0 1px 3px rgba(15, 68, 57, 0.04);
  --shadow-md:  0 4px 12px rgba(15, 68, 57, 0.08), 0 2px 4px rgba(15, 68, 57, 0.04);
  --shadow-lg:  0 12px 32px rgba(15, 68, 57, 0.12), 0 4px 8px rgba(15, 68, 57, 0.06);

  /* --- Type --- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --max-width: 1180px;
  --transition: 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}