/* rePost Design Tokens — джерело: design-export/cheatsheet.md (Figma RePost.Global).
   Кольори бренду 1:1 з ДС. Кілька значень затемнено від ДС для контрасту WCAG AA
   (позначено коментарем) — це усвідомлений a11y-трейдоф, не помилка.
   Портативно — ляже і в PHP, і в React. */
:root {
  /* Brand */
  --color-primary: #7f2aff;        /* Purple-600 */
  --color-primary-hover: #6622cc;  /* Purple-700 */
  --color-bg: #f4f3ec;             /* Website background (beige) */
  --color-surface: #ffffff;
  --color-text: #201e25;           /* Grey-900 */
  --color-text-muted: #696974;     /* Grey-600 — 5.4:1 на білому (AA) */
  --color-text-soft: #6b6b78;      /* затемнено від Grey-500 #878997 → ~4.6:1 (AA для body) */
  --color-placeholder: #6e6f7a;    /* затемнено → ~4.5:1 (плейсхолдери-підказки) */

  /* Purple scale */
  --color-purple-50: #fcfaff;  --color-purple-100: #f9f4ff; --color-purple-200: #e5d4ff;
  --color-purple-300: #ccaaff; --color-purple-400: #b27fff; --color-purple-500: #9955ff;
  --color-purple-600: #7f2aff; --color-purple-700: #6622cc; --color-purple-800: #4c1999;
  --color-purple-900: #331166; --color-purple-1000: #190833;

  /* Grey scale */
  --color-grey-50: #fcfcfc;  --color-grey-100: #f5f5f6; --color-grey-200: #d6d7e1;
  --color-grey-250: #cacbd3; --color-grey-300: #b1b2bc; --color-grey-400: #9e9fab;
  --color-grey-500: #878997; --color-grey-600: #696974; --color-grey-700: #4a4952;
  --color-grey-800: #37363c; --color-grey-900: #201e25; --color-grey-1000: #101214;

  /* Status (fill = ДС; *-text = затемнені варіанти для тексту на тінтованому фоні, AA 4.5:1) */
  --color-success: #1d9e68;  --color-success-bg: #e8f5f0;  --color-success-text: #157a4e;  --color-success-strong: #11201c;
  --color-error: #c9372c;    --color-error-bg: #fff3f2;    --color-error-text: #b21f15;
  --color-warning: #ff820d;  --color-warning-bg: #fff4eb;  --color-warning-text: #b35900;
  --color-info: #5897fb;     --color-info-bg: #eef4ff;     --color-info-text: #2f6fd0;

  /* Typography */
  --font-ui: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-tech: 'Roboto Mono', ui-monospace, monospace;

  /* Radius */
  --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-pill: 999px;

  /* Spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(32,30,37,0.05);
  --shadow-sm: 0 2px 8px rgba(32,30,37,0.06);
  --shadow-md: 0 8px 24px rgba(32,30,37,0.08);
  --shadow-lg: 0 16px 48px rgba(32,30,37,0.10);
  --shadow-focus: 0 0 0 3px rgba(127,42,255,0.55);  /* посилено → видимий фокус, 1.4.11 */

  --border: 1px solid var(--color-grey-300);        /* контрол-бордер 3:1 (1.4.11) */
  --border-soft: 1px solid #e3e2ea;
  --transition: 0.16s ease;

  --content-narrow: 640px;
  --content-wide: 1120px;
}