/* ================================================================
   Daria Brezgunova — Design Tokens
   CSS custom properties distilled from the live site
   ================================================================ */

:root {
  /* ---------- Brand greens ---------- */
  --db-green: #6c9c02;
  --db-green-dark: #5a8201;
  --db-green-darker: #4a7001;
  --db-green-bright: #8ec204;
  --db-green-tint-05: rgba(108, 156, 2, 0.05);
  --db-green-tint-10: rgba(108, 156, 2, 0.10);
  --db-green-tint-20: rgba(108, 156, 2, 0.20);

  /* ---------- Neutrals ---------- */
  --db-fg-1: #000000;
  --db-fg-2: #333333;
  --db-fg-3: #555555;
  --db-fg-4: #595959;
  --db-fg-5: #666666;
  --db-fg-6: #999999;

  --db-bg-base: #ffffff;
  --db-bg-subtle: #f9f9f9;
  --db-bg-muted: #f5f5f5;
  --db-bg-hover: #e0e0e0;

  /* ---------- Borders ---------- */
  --db-border-hairline: #eee;
  --db-border-subtle: #f0f0f0;
  --db-border-soft: #e0e0e0;
  --db-border-medium: #dee2e6;
  --db-border-dark: #c0c0c0;

  /* ---------- Semantic ---------- */
  --db-fg-default: var(--db-fg-2);
  --db-fg-muted: var(--db-fg-5);
  --db-fg-subtle: var(--db-fg-6);
  --db-fg-link: var(--db-green);
  --db-fg-link-hover: var(--db-green-dark);

  --db-surface: var(--db-bg-base);
  --db-surface-muted: var(--db-bg-muted);

  --db-border: var(--db-border-hairline);
  --db-border-strong: var(--db-border-soft);

  --db-success: #28a745;
  --db-danger: #dc3545;

  /* ---------- Typography ---------- */
  --db-font-sans: 'TildaSans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --db-font-mono: 'Monaco', 'Consolas', ui-monospace, monospace;

  /* ---------- Radii ---------- */
  --db-radius-xs: 3px;
  --db-radius-sm: 5px;
  --db-radius-md: 6px;
  --db-radius-lg: 8px;
  --db-radius-xl: 10px;
  --db-radius-2xl: 12px;
  --db-radius-3xl: 16px;

  /* ---------- Shadows ---------- */
  --db-shadow-xs: 0 2px 10px rgba(0, 0, 0, 0.1);
  --db-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
  --db-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.1);
  --db-shadow-lg: 0 6px 20px rgba(0, 0, 0, 0.15);
  --db-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.2);
  --db-shadow-accent: 0 4px 12px rgba(108, 156, 2, 0.3);

  /* ---------- Spacing ---------- */
  --db-space-1:  4px;
  --db-space-2:  8px;
  --db-space-3:  12px;
  --db-space-4:  16px;
  --db-space-5:  20px;
  --db-space-6:  24px;
  --db-space-8:  30px;
  --db-space-10: 40px;
  --db-space-12: 60px;
  --db-space-16: 90px;

  /* ---------- Motion ---------- */
  --db-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --db-duration-fast: 0.2s;
  --db-duration-base: 0.3s;

  /* ---------- Dividers ---------- */
  --db-divider-w: 60px;
  --db-divider-h: 2px;
  --db-divider-color: var(--db-green-bright);
}