/* Design tokens */

:root {
  /* Surfaces */
  --color-bg: #ffffff;
  --color-surface: #f7f7f5;
  --color-surface-2: #f0f0ed;

  /* Text */
  --color-text-primary:   #0a0a0a;
  --color-text-secondary: #6b6b6b;
  --color-text-tertiary:  #9a9a9a;
  --color-text-inverse:   #ffffff;

  /* Borders */
  --color-border-tertiary:  #ececec;
  --color-border-secondary: #d6d6d6;
  --color-border-primary:   #a8a8a8;

  /* Accent — teal */
  --color-accent:       #0f6e56;
  --color-accent-hover: #0a5a45;
  --color-accent-light: #e1f5ee;
  --color-accent-dark:  #04342c;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', sans-serif;
  --font-serif: 'Lora', 'Georgia', 'Times New Roman', serif;

  /* Spacing scale (8-pt rhythm) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Layout */
  --container-max: 1200px;
  --container-padding: 32px;
  --header-height: 64px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  /* Мягкая кривая для появления: плавный старт и плавное торможение */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 700ms;
  --duration-reveal: 1100ms;

  /* Z-index */
  --z-header: 50;
  --z-modal: 100;
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
  }
}