/* ============================================================
   Christie Coaching Co. — Design tokens
   Palette drawn from the brand mark: deep teal (anchor), sage
   green, slate blue, amber/gold, on a warm cream/sand neutral.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

:root {
  /* ---- Brand: Deep Teal (primary anchor) ---- */
  --teal-50:  #eaf2f1;
  --teal-100: #cfe1df;
  --teal-200: #a6c7c4;
  --teal-300: #6fa3a0;
  --teal-400: #45827f;
  --teal-500: #2c6a6b;
  --teal-600: #235657;
  --teal-700: #1c4546;
  --teal-800: #163738;
  --teal-900: #102829;

  /* ---- Brand: Sage Green ---- */
  --sage-50:  #eef6f3;
  --sage-100: #d9ebe5;
  --sage-200: #bcdcd2;
  --sage-300: #9bcabd;
  --sage-400: #7ab3a9;

  /* ---- Brand: Slate Blue ---- */
  --blue-50:  #eaf0f5;
  --blue-500: #37648c;
  --blue-600: #2d5277;
  --blue-700: #244160;

  /* ---- Brand: Amber / Gold ---- */
  --amber-50:  #faf3e8;
  --amber-200: #e8c896;
  --amber-400: #cb964c;
  --amber-500: #b27e38;
  --amber-600: #93662c;

  /* ---- Warm neutrals ---- */
  --warm-0:   #ffffff;
  --warm-50:  #fbf8f3;
  --warm-100: #f4eee4;
  --warm-150: #ece4d6;
  --warm-200: #ddd3c2;
  --warm-300: #c6bba7;
  --warm-400: #a79b86;
  --warm-500: #877c69;
  --warm-600: #685f50;
  --warm-700: #4b443a;
  --warm-900: #21302f;

  /* ---- Semantic aliases ---- */
  --color-bg:      var(--warm-50);
  --text-strong:   var(--warm-900);
  --text-body:     var(--warm-700);
  --text-link:     var(--teal-500);

  --primary:        var(--teal-500);
  --primary-hover:  var(--teal-600);
  --primary-active: var(--teal-700);
  --primary-fg:     #ffffff;
  --primary-soft:   var(--teal-50);

  --secondary:       var(--blue-500);
  --secondary-hover: var(--blue-600);
  --secondary-fg:    #ffffff;

  --accent:       var(--amber-400);
  --accent-hover: var(--amber-500);
  --accent-fg:    var(--warm-900);

  --border:        var(--warm-200);
  --border-strong: var(--warm-300);
  --border-subtle: var(--warm-150);

  /* ---- Typography ---- */
  --font-serif: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans:  'Mulish', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fw-regular:  400;
  --fw-semibold: 600;
  --fw-bold:     700;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;

  --leading-tight:  1.12;
  --leading-normal: 1.55;

  /* ---- Spacing / radius / shadow ---- */
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-pill: 999px;

  --shadow-sm: 0 2px 6px rgba(22, 55, 56, 0.07), 0 1px 2px rgba(22, 55, 56, 0.05);
  --shadow-md: 0 6px 18px rgba(22, 55, 56, 0.09), 0 2px 6px rgba(22, 55, 56, 0.05);

  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  margin: 0;
}

p { margin: 0 0 1em; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--primary-hover); }

::selection { background: var(--sage-200); color: var(--teal-900); }