/* ─── Design Tokens ──────────────────────────────────────────────────────────
   Every color is either a Customizer-controlled variable (printed by
   wps_inline_styles(), includes/customizer/customizer.php) or a color-mix()
   derivation of one. The :root values below are only a fallback for the
   instant before that inline <style> prints.

   Base roles (8 + project extensions):
     --primary-color    deep sage — buttons, links, kickers, focus
     --secondary-color  lavender — second pastel accent
     --pastel-green / --pastel-peach / --pastel-sky — the other pastel tones
     --text-color / --text-muted / --bg-color / --bg-light /
     --surface-color / --border-color
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --hover-duration: 0.5s;
  --duration: 0.9s;
  --timing: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* ─── Base colors — sourced from the Customizer ─── */
  --primary-color: #3f7c61;
  --secondary-color: #b8a7f0;
  --text-color: #2c3a35;
  --text-muted: #6e7a75;
  --bg-light: #f3efe7;
  --bg-color: #fbf8f3;
  --surface-color: #ffffff;
  --border-color: #e4e3dc;
  --pastel-green: #86c5a4;
  --pastel-peach: #f4b49a;
  --pastel-sky: #9bd2ec;
  --positive-color: #3f7c61;
  --negative-color: #b5574a;

  /* Pure neutral for text on saturated surfaces (not a brand color). */
  --white: #ffffff;

  /* ─── Derived roles ─── */
  --ink: var(--text-color);
  --muted: var(--text-muted);
  --deep: var(--primary-color);
  --sage: var(--pastel-green);
  --lav: var(--secondary-color);
  --peach: var(--pastel-peach);
  --sky: var(--pastel-sky);
  --paper: var(--bg-color);
  --soft: var(--bg-light);
  --line: var(--border-color);

  /* Deeper versions of the pastels (gradient text, numbers, kickers). */
  --sage-deep: color-mix(in srgb, var(--primary-color) 55%, var(--pastel-green));
  --lav-deep: color-mix(in oklch, var(--secondary-color) 78%, black);
  --peach-deep: color-mix(in oklch, var(--pastel-peach) 85%, black);
  --sky-deep: color-mix(in oklch, var(--pastel-sky) 72%, black);

  /* Pale tints (pills, icon discs, soft section fills). */
  --tint-green: color-mix(in srgb, var(--pastel-green) 22%, var(--surface-color));
  --tint-green-2: color-mix(in srgb, var(--pastel-green) 36%, var(--surface-color));
  --tint-lav: color-mix(in srgb, var(--secondary-color) 25%, var(--surface-color));
  --tint-lav-2: color-mix(in srgb, var(--secondary-color) 42%, var(--surface-color));
  --tint-peach: color-mix(in srgb, var(--pastel-peach) 25%, var(--surface-color));
  --tint-peach-2: color-mix(in srgb, var(--pastel-peach) 42%, var(--surface-color));
  --tint-sky: color-mix(in srgb, var(--pastel-sky) 25%, var(--surface-color));
  --tint-sky-2: color-mix(in srgb, var(--pastel-sky) 42%, var(--surface-color));

  /* Frosted glass surfaces. */
  --card: color-mix(in srgb, var(--surface-color) 72%, transparent);
  --card-strong: color-mix(in srgb, var(--surface-color) 82%, transparent);
  --glass-edge: color-mix(in srgb, var(--surface-color) 92%, transparent);

  /* Signature gradients. */
  --grad-brand: linear-gradient(100deg, var(--sage-deep), var(--lav-deep) 55%, var(--peach-deep));
  --grad-button: linear-gradient(120deg, var(--sage-deep), var(--lav-deep) 60%, var(--peach-deep));
  --grad-line: linear-gradient(90deg, var(--sage), var(--sky), var(--lav), var(--peach));

  /* Shadow (green-tinted, long and diffuse). */
  --shadow: 0 1px 2px color-mix(in srgb, var(--text-color) 4%, transparent),
    0 18px 50px -24px color-mix(in srgb, var(--primary-color) 30%, transparent);
  --shadow-deep: 0 30px 70px -40px color-mix(in srgb, var(--text-color) 38%, transparent);
  --ring: 0 0 0 4px color-mix(in srgb, var(--pastel-green) 30%, transparent);

  /* Fonts — --font-title / --font-text are printed by wps_inline_styles()
     from the Customizer; the fallbacks keep the look before it prints. */
  --f-h: var(--font-title, "Fraunces"), Georgia, serif;
  --f-b: var(--font-text, "Plus Jakarta Sans"), system-ui, sans-serif;
  --f-m: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Shape */
  --r-sm: 18px;
  --r: 28px;
  --r-lg: 34px;
  --r-xl: 44px;

  /* Layout */
  --wrap: 1240px;
  --gutter: 18px;
}

@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }
}