/* 4 רגליים · Canistherapy · Design Tokens
   Palette: sage-mist (default)
   ============================================ */

:root {
  /* Color palette — oklch, sage mist */
  --bg: oklch(0.985 0.005 160);
  --bg-soft: oklch(0.965 0.008 160);
  --bg-card: oklch(0.995 0.004 160);
  --ink: oklch(0.22 0.015 170);
  --ink-soft: oklch(0.45 0.015 170);
  --ink-muted: oklch(0.60 0.010 170);
  --line: oklch(0.88 0.012 160);
  --line-soft: oklch(0.94 0.008 160);

  /* Olive/sage primary */
  --olive-900: oklch(0.30 0.035 175);
  --olive-700: oklch(0.48 0.045 170);
  --olive-500: oklch(0.64 0.050 170);
  --olive-300: oklch(0.84 0.035 165);
  --olive-100: oklch(0.94 0.020 165);

  /* Earth accent */
  --earth-600: oklch(0.58 0.060 45);
  --earth-400: oklch(0.74 0.045 50);
  --earth-100: oklch(0.95 0.018 50);

  /* Semantic */
  --primary: var(--olive-700);
  --primary-ink: var(--bg);
  --accent: var(--earth-600);

  /* Typography */
  --font-serif: 'Fraunces', 'Frank Ruhl Libre', Georgia, serif;
  --font-sans: 'Inter', 'Assistant', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale (fluid) */
  --t-micro: 0.75rem;
  --t-small: 0.875rem;
  --t-body: 1rem;
  --t-lead: 1.125rem;
  --t-h5: 1.25rem;
  --t-h4: clamp(1.375rem, 1.1rem + 0.8vw, 1.75rem);
  --t-h3: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);
  --t-h2: clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem);
  --t-h1: clamp(2.75rem, 1.8rem + 4vw, 5rem);
  --t-display: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* Spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-full: 999px;

  /* Shadows */
  --sh-sm: 0 1px 2px oklch(0.22 0.018 135 / 0.04);
  --sh-md: 0 4px 18px oklch(0.22 0.018 135 / 0.06);
  --sh-lg: 0 18px 48px oklch(0.22 0.018 135 / 0.09);

  /* Container */
  --max-w: 1240px;
  --pad-x: clamp(1.25rem, 4vw, 2.5rem);
}

/* RTL font overrides */
html[dir="rtl"] {
  --font-serif: 'Rubik', 'Frank Ruhl Libre', 'Fraunces', serif;
  --font-sans: 'Rubik', 'Assistant', 'Inter', system-ui, sans-serif;
}