/*
  VibeMyWay Design Tokens
  OKLCH-based, perceptually uniform color system.

  Font families default to Geologica + Source Serif 4.
  Override --font-display and --font-body per page for variants
  (e.g. Bricolage Grotesque / Literata on index-secondary.html).
*/

:root {
  /* ── Brand ── */
  --brand:             oklch(0.45 0.27 264);
  --brand-light:       oklch(0.93 0.06 264);
  --brand-hover:       oklch(0.39 0.26 264);
  --depth:             oklch(0.34 0.25 264);

  /* ── Success / Grove Green ── */
  --success:           oklch(0.56 0.17 162);
  --success-light:     oklch(0.94 0.05 162);
  --success-text:      oklch(0.40 0.14 162);

  /* ── Surface tiers ── */
  --surface:           oklch(0.985 0.004 264);
  --surface-alt:       oklch(0.955 0.008 264);
  --surface-container: oklch(0.91  0.010 264);

  /* ── Text hierarchy ── */
  --text-primary:      oklch(0.14 0.025 264);
  --text-secondary:    oklch(0.44 0.015 264);
  --text-tertiary:     oklch(0.50 0.015 264);  /* WCAG AA: 5.9:1 on surface, 5.4:1 on surface-alt, 4.6:1 on surface-container */

  /* ── Text on --depth backgrounds ── */
  --depth-text-primary:   oklch(0.97 0.010 264);
  --depth-text-secondary: oklch(0.80 0.040 264);
  --depth-text-muted:     oklch(0.76 0.060 264);  /* WCAG AA: ~5.8:1 on depth */
  --depth-success:        oklch(0.72 0.130 162);

  /* ── Borders ── */
  --border:            oklch(0.86 0.010 264);
  --border-subtle:     oklch(0.92 0.006 264);

  /* ── Spacing — 4pt base ── */
  --sp-2xs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;
  --sp-4xl: 96px;

  /* ── Typography — override per page for font variants ── */
  --font-display: 'Geologica', system-ui, sans-serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  /* ── Motion ── */
  --ease-out:    cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
  --dur-enter:   600ms;
}