/* ═══════════════════════════════════════════════════════════
   CXnet · shared design tokens
   Единый источник primitive design values для frontend.
   Компонентные переменные (navbar/auth и т.п.) остаются в своих CSS.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;

  /* Совместимые aliases для существующих Core-компонентов. */
  --core-font-display: var(--font-display);
  --core-font-body: var(--font-body);

  /* Brand palette */
  --clr-forest: #1a3c2e;
  --clr-forest-mid: #2d6a4f;
  --clr-forest-light: #52b788;
  --clr-sage: #95d5b2;
  --clr-mint: #d8f3dc;
  --clr-earth: #c4975a;
  --clr-earth-light: #e9c46a;
  --clr-cream: #f8f6f0;
  --clr-parchment: #f0ece1;
  --clr-bark: #6b4f3a;

  /* Neutral scale */
  --clr-white: #ffffff;
  --clr-gray-50: #f9fafb;
  --clr-gray-100: #f3f4f6;
  --clr-gray-200: #e5e7eb;
  --clr-gray-300: #d1d5db;
  --clr-gray-400: #9ca3af;
  --clr-gray-500: #6b7280;
  --clr-gray-600: #4b5563;
  --clr-gray-700: #374151;
  --clr-gray-800: #1f2937;
  --clr-gray-900: #111827;

  /* Status */
  --clr-success: #2d9e6b;
  --clr-warning: #f59e0b;
  --clr-danger: #ef4444;
  --clr-info: #3b82f6;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout */
  --max-w: 1280px;
  --sidebar-w: 280px;
  --card-radius: 16px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --shadow-card: 0 2px 12px rgba(26,60,46,.08);
  --shadow-hover: 0 8px 30px rgba(26,60,46,.16);

  /* Transitions */
  --t-fast: 150ms ease;
  --t-base: 250ms ease;
  --t-slow: 400ms ease;

  /* Borders */
  --border: 1px solid var(--clr-gray-200);
  --border-forest: 1px solid var(--clr-forest-light);

  /* Interaction */
  --tap-target-min: 44px;
}

/*
 * Mobile-first spacing: узкий экран является базовым состоянием.
 * Начиная с tablet/desktop ширины восстанавливаем прежние desktop values.
 */
@media (min-width: 769px) {
  :root {
    --space-lg: 24px;
    --space-xl: 32px;
  }
}