/* ============================================================
   Design tokens — Kinesia Fisioterapia
   ============================================================ */

:root {
  /* Color: role-based, derived from a "clinical but natural" direction */
  --color-base: #f3f5f0;          /* page background — pale sage mist */
  --color-base-alt: #eaeee4;      /* alternating section background */
  --color-surface: #ffffff;       /* cards / panels */
  --color-surface-tint: #e7ebe3;  /* softer card on base-alt */

  --color-ink: #1e2a22;           /* primary text — deep forest ink */
  --color-ink-soft: #4f5d53;      /* secondary text */
  --color-ink-faint: #7c8a80;     /* tertiary text / placeholders */

  --color-primary: #2f6b52;       /* brand green — links, nav, primary actions */
  --color-primary-dark: #21503d;  /* hover/active state */
  --color-primary-tint: #dfe9e2;  /* tinted backgrounds, badges */

  --color-accent: #c98a3e;        /* warm ochre — CTA emphasis, used sparingly */
  --color-accent-dark: #a86f2c;

  --color-line: #d6ddd0;          /* hairline borders */
  --color-line-strong: #b7c2b0;

  --color-error: #a8432f;
  --color-success: #2f6b52;

  /* Typography */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --fs-900: clamp(2.75rem, 2rem + 3vw, 4.5rem);   /* hero headline */
  --fs-800: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); /* section headline */
  --fs-700: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);   /* card / sub headline */
  --fs-600: 1.35rem;
  --fs-500: 1.125rem;
  --fs-400: 1rem;   /* body */
  --fs-300: 0.9rem;
  --fs-200: 0.8rem; /* eyebrow / labels */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  /* Layout */
  --content-max: 74rem;
  --content-narrow: 42rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(30, 42, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(30, 42, 34, 0.08);
  --shadow-lg: 0 16px 48px rgba(30, 42, 34, 0.12);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 150ms;
  --dur-med: 320ms;
  --dur-slow: 900ms;
}