/* People That Care For Israel — Color tokens
   Source: brandbook §03 "Цвет" — a restrained palette of two dominants (blue + olive)
   plus light backgrounds and neutral text. Tints/shades are derived in oklch for UI needs
   (hover/press/disabled) since the brandbook only specifies the six base swatches. */

:root {
  /* Base palette — exact brandbook swatches */
  --blue-600: #1E5AA8;   /* Основной синий — headings, accents, logo */
  --blue-800: #153E75;   /* Тёмно-синий — panels, footers, dark backgrounds */
  --blue-100: #DCEAF7;   /* Светло-голубой — background tint, ≤30% of a spread */
  --olive-500: #A5A66A;  /* Оливковый — list markers, thin rules, decoration */
  --cream-50: #F8F5EE;   /* Бежевый — background tint, ≤30% of a spread */
  --ink-700: #4A4A4A;    /* Текст — all body copy */
  --white: #FFFFFF;

  /* Derived tints/shades (oklch, for states — not in source brandbook) */
  --blue-700: oklch(from var(--blue-600) calc(l - 0.08) c h);
  --blue-500: oklch(from var(--blue-600) calc(l + 0.08) c h);
  --blue-050: oklch(from var(--blue-100) calc(l + 0.03) calc(c * 0.6) h);
  --olive-600: oklch(from var(--olive-500) calc(l - 0.1) c h);
  --olive-100: oklch(from var(--olive-500) calc(l + 0.28) calc(c * 0.5) h);
  --ink-400: oklch(from var(--ink-700) calc(l + 0.25) calc(c * 0.5) h);
  --ink-200: oklch(from var(--ink-700) calc(l + 0.45) calc(c * 0.3) h);

  /* Semantic aliases */
  --surface-page: var(--cream-50);
  --surface-card: var(--white);
  --surface-inverse: var(--blue-800);
  --surface-tint-blue: var(--blue-100);
  --surface-tint-cream: var(--cream-50);

  --text-heading: var(--blue-600);
  --text-body: var(--ink-700);
  --text-muted: var(--ink-400);
  --text-inverse: var(--cream-50);
  --text-on-blue-100: var(--blue-800);

  --accent-olive: var(--olive-500);
  --accent-olive-strong: var(--olive-600);

  --border-subtle: var(--olive-100);
  --border-default: oklch(from var(--ink-700) l calc(c * 0.4) h / 0.18);

  --link: var(--blue-600);
  --link-hover: var(--blue-700);

  --focus-ring: var(--blue-500);

  --icon-on-light: var(--blue-800);
  --icon-on-dark: var(--cream-50);
}