/* 01-tokens.css
 * Token system (no pure black). Uses HSL for stable theming.
 * Tokens are semantic where possible.
 */

:root{
  /* Brand / accents (therapy-safe) */
  --h-accent: 158;               /* soft teal/green */
  --h-warm: 28;                  /* warm sand */
  --h-sky: 205;                  /* calm blue */

  /* Neutrals (no black) */
  --h-ink: 220;
  --h-surface: 40;

  /* Core colors */
  --c-bg: hsl(var(--h-surface) 36% 97%);          /* near-white, warm */
  --c-surface: hsl(var(--h-surface) 30% 99%);
  --c-card: hsl(var(--h-surface) 28% 100%);
  --c-border: hsl(var(--h-ink) 18% 88%);

  /* Text colors (no black) */
  --c-text: hsl(var(--h-ink) 18% 18%);            /* deep slate */
  --c-muted: hsl(var(--h-ink) 10% 40%);           /* muted slate */
  --c-soft: hsl(var(--h-ink) 14% 92%);

  /* Accent system */
  --c-accent: hsl(var(--h-accent) 34% 32%);
  --c-accent-soft: hsl(var(--h-accent) 40% 92%);
  --c-accent-ink: hsl(var(--h-accent) 26% 18%);

  /* Warm support */
  --c-warm-soft: hsl(var(--h-warm) 50% 92%);
  --c-warm: hsl(var(--h-warm) 50% 42%);

  /* Links */
  --c-link: hsl(var(--h-sky) 45% 34%);
  --c-link-hover: hsl(var(--h-sky) 55% 28%);

  /* Focus */
  --c-focus: color-mix(in srgb, var(--c-accent) 55%, transparent);

  /* Radius */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

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

  /* Typography */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --lh: 1.6;
  --measure: 70ch;

  /* Shadows (very soft) */
  --shadow-1: 0 1px 2px hsl(var(--h-ink) 20% 20% / 0.06), 0 8px 24px hsl(var(--h-ink) 20% 20% / 0.06);

  /* Max widths */
  --container: 1100px;
}