/* ═══════════════════════════════════════════════════════════════════════
   IPieeja Design Tokens — единый источник визуальных значений
   Все компоненты используют ТОЛЬКО эти переменные.
   НЕ переопределять в других файлах без крайней необходимости.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Цвета: Primary (глубокий индиго) ───────────────────────────── */
  --ip-color-primary-50:  #eef2f9;
  --ip-color-primary-100: #d4def2;
  --ip-color-primary-200: #a9bde5;
  --ip-color-primary-300: #7e9cd8;
  --ip-color-primary-400: #537bcb;
  --ip-color-primary-500: #285abe;  /* ← основной */
  --ip-color-primary-600: #204898;
  --ip-color-primary-700: #183672;
  --ip-color-primary-800: #10244c;
  --ip-color-primary-900: #081226;
  --ip-color-primary:     var(--ip-color-primary-600);

  /* ── Цвета: Accent (тёплый янтарный) ────────────────────────────── */
  --ip-color-accent-50:  #fef8ee;
  --ip-color-accent-100: #fcecd3;
  --ip-color-accent-200: #f8d9a7;
  --ip-color-accent-300: #f5c67b;
  --ip-color-accent-400: #f1b34f;
  --ip-color-accent-500: #eea023;  /* ← основной */
  --ip-color-accent-600: #be801c;
  --ip-color-accent-700: #8e6015;
  --ip-color-accent-800: #5e400e;
  --ip-color-accent-900: #2e2007;
  --ip-color-accent:     var(--ip-color-accent-500);

  /* ── Цвета: Neutral (холодные серые) ────────────────────────────── */
  --ip-color-neutral-0:    #ffffff;
  --ip-color-neutral-25:   #f9fafb;
  --ip-color-neutral-50:   #f4f6f8;
  --ip-color-neutral-75:   #eef1f4;
  --ip-color-neutral-100:  #e4e8ed;
  --ip-color-neutral-200:  #cdd4dc;
  --ip-color-neutral-300:  #b1bcc6;
  --ip-color-neutral-400:  #8d9aa8;
  --ip-color-neutral-500:  #6b7a8a;
  --ip-color-neutral-600:  #526071;
  --ip-color-neutral-700:  #3d4857;
  --ip-color-neutral-800:  #28313d;
  --ip-color-neutral-900:  #141a22;
  --ip-color-neutral-1000: #0a0d12;

  /* ── Семантические цвета ────────────────────────────────────────── */
  --ip-color-success:       #0e8c5c;
  --ip-color-success-light: #e6f6f0;
  --ip-color-success-dark:  #0a6341;

  --ip-color-warning:       #d4860b;
  --ip-color-warning-light: #fef6e7;
  --ip-color-warning-dark:  #965f08;

  --ip-color-danger:        #d63031;
  --ip-color-danger-light:  #fdeaea;
  --ip-color-danger-dark:   #a32223;

  --ip-color-info:          #1a7fbd;
  --ip-color-info-light:    #e6f2f9;
  --ip-color-info-dark:     #125882;

  /* ── Типографика: семейства ─────────────────────────────────────── */
  --ip-font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ip-font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
  --ip-font-serif: 'Georgia', 'Cambria', 'Times New Roman', serif;

  /* ── Типографика: размеры (type scale) ──────────────────────────── */
  --ip-font-size-xs:   0.75rem;   /* 12px */
  --ip-font-size-sm:   0.8125rem; /* 13px */
  --ip-font-size-base: 0.875rem;  /* 14px */
  --ip-font-size-md:   1rem;      /* 16px */
  --ip-font-size-lg:   1.125rem;  /* 18px */
  --ip-font-size-xl:   1.25rem;   /* 20px */
  --ip-font-size-2xl:  1.5rem;    /* 24px */
  --ip-font-size-3xl:  1.875rem;  /* 30px */
  --ip-font-size-4xl:  2.25rem;   /* 36px */
  --ip-font-size-5xl:  3rem;      /* 48px */

  /* ── Типографика: насыщенность ──────────────────────────────────── */
  --ip-font-weight-normal:   400;
  --ip-font-weight-medium:   500;
  --ip-font-weight-semibold: 600;
  --ip-font-weight-bold:     700;

  /* ── Типографика: межстрочный интервал ──────────────────────────── */
  --ip-line-height-tight:  1.2;
  --ip-line-height-normal: 1.5;
  --ip-line-height-relaxed: 1.7;
  --ip-line-height-heading: 1.25;

  /* ── Типографика: трекинг ───────────────────────────────────────── */
  --ip-letter-spacing-tight:  -0.02em;
  --ip-letter-spacing-normal:  0;
  --ip-letter-spacing-wide:    0.04em;
  --ip-letter-spacing-wider:   0.08em;
  --ip-letter-spacing-widest:  0.12em;

  /* ── Отступы (4px grid) ─────────────────────────────────────────── */
  --ip-space-1:  0.25rem;  /* 4px  */
  --ip-space-2:  0.5rem;   /* 8px  */
  --ip-space-3:  0.75rem;  /* 12px */
  --ip-space-4:  1rem;     /* 16px */
  --ip-space-5:  1.25rem;  /* 20px */
  --ip-space-6:  1.5rem;   /* 24px */
  --ip-space-8:  2rem;     /* 32px */
  --ip-space-10: 2.5rem;   /* 40px */
  --ip-space-12: 3rem;     /* 48px */
  --ip-space-16: 4rem;     /* 64px */
  --ip-space-20: 5rem;     /* 80px */
  --ip-space-24: 6rem;     /* 96px */
  --ip-space-32: 8rem;     /* 128px */

  /* ── Радиусы ────────────────────────────────────────────────────── */
  --ip-radius-none: 0;
  --ip-radius-xs:   4px;
  --ip-radius-sm:   6px;
  --ip-radius-md:   8px;
  --ip-radius-lg:   14px;
  --ip-radius-xl:   20px;
  --ip-radius-2xl:  24px;
  --ip-radius-full: 999px;

  /* ── Тени ───────────────────────────────────────────────────────── */
  --ip-shadow-xs: 0 1px 2px rgba(20, 26, 34, 0.04);
  --ip-shadow-sm: 0 1px 3px rgba(20, 26, 34, 0.06),
                  0 1px 2px rgba(20, 26, 34, 0.04);
  --ip-shadow-md: 0 4px 8px rgba(20, 26, 34, 0.06),
                  0 2px 4px rgba(20, 26, 34, 0.04);
  --ip-shadow-lg: 0 12px 24px rgba(20, 26, 34, 0.08),
                  0 4px 8px rgba(20, 26, 34, 0.04);
  --ip-shadow-xl: 0 20px 40px rgba(20, 26, 34, 0.1),
                  0 8px 16px rgba(20, 26, 34, 0.04);

  /* ── Анимация ───────────────────────────────────────────────────── */
  --ip-transition-fast: 150ms;
  --ip-transition-base: 250ms;
  --ip-transition-slow: 400ms;
  --ip-easing-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --ip-easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ip-easing-out:      cubic-bezier(0, 0, 0.2, 1);
  --ip-easing-in:       cubic-bezier(0.4, 0, 1, 1);

  /* ── Прочее ─────────────────────────────────────────────────────── */
  --ip-border-default: 1.5px solid var(--ip-color-neutral-200);
  --ip-focus-ring:     0 0 0 3px rgba(40, 90, 190, 0.2);
  --ip-focus-ring-danger: 0 0 0 3px rgba(214, 48, 49, 0.2);
  --ip-container-max:  1200px;
  --ip-container-narrow: 740px;
}

/* ── Тёмная тема (опционально, не активна по умолчанию) ──────────── */
[data-theme="dark"] {
  --ip-color-neutral-0:    #141a22;
  --ip-color-neutral-25:   #18202a;
  --ip-color-neutral-50:   #1d2735;
  --ip-color-neutral-75:   #232f40;
  --ip-color-neutral-100:  #2a384c;
  --ip-color-neutral-200:  #3d4f66;
  --ip-color-neutral-300:  #556b85;
  --ip-color-neutral-400:  #7289a3;
  --ip-color-neutral-500:  #8fa3b8;
  --ip-color-neutral-600:  #a8b8c9;
  --ip-color-neutral-700:  #c1cdd9;
  --ip-color-neutral-800:  #d9e1e9;
  --ip-color-neutral-900:  #f0f3f6;
  --ip-color-neutral-1000: #fafbfc;

  --ip-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --ip-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
  --ip-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.18);
  --ip-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.34), 0 4px 8px rgba(0, 0, 0, 0.2);
  --ip-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.22);

  --ip-border-default: 1.5px solid var(--ip-color-neutral-200);
  --ip-focus-ring: 0 0 0 3px rgba(120, 160, 240, 0.3);
}

/* ── Автоматическая тёмная тема через системные настройки ─────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ip-color-neutral-0:    #141a22;
    --ip-color-neutral-25:   #18202a;
    --ip-color-neutral-50:   #1d2735;
    --ip-color-neutral-75:   #232f40;
    --ip-color-neutral-100:  #2a384c;
    --ip-color-neutral-200:  #3d4f66;
    --ip-color-neutral-300:  #556b85;
    --ip-color-neutral-400:  #7289a3;
    --ip-color-neutral-500:  #8fa3b8;
    --ip-color-neutral-600:  #a8b8c9;
    --ip-color-neutral-700:  #c1cdd9;
    --ip-color-neutral-800:  #d9e1e9;
    --ip-color-neutral-900:  #f0f3f6;
    --ip-color-neutral-1000: #fafbfc;

    --ip-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
    --ip-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.16);
    --ip-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.28), 0 2px 4px rgba(0, 0, 0, 0.18);
    --ip-shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.34), 0 4px 8px rgba(0, 0, 0, 0.2);
    --ip-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.22);

    --ip-border-default: 1.5px solid var(--ip-color-neutral-200);
    --ip-focus-ring: 0 0 0 3px rgba(120, 160, 240, 0.3);
  }
}