/* ============================================================
   GP Service — Design Tokens
   Єдине місце для зміни кольорів, шрифтів та відступів
   ============================================================ */

:root {
  /* ---- Бренд-кольори ---- */
  --color-accent: #2ef4df;
  --color-accent-dim: #1abfad;
  --color-accent-glow: #00fff7;
  --color-accent-alpha-15: rgba(46, 244, 223, 0.15);
  --color-accent-alpha-40: rgba(46, 244, 223, 0.4);
  --color-accent-alpha-08: rgba(46, 244, 223, 0.08);

  /* ---- Фони ---- */
  --color-bg-primary: #0a0e17;
  --color-bg-secondary: #111827;
  --color-bg-tertiary: #1c2333;
  --color-bg-overlay: rgba(10, 14, 23, 0.88);

  /* ---- Текст ---- */
  --color-text-primary: #eaeaea;
  --color-text-secondary: #8b9ab0;
  --color-text-muted: #4a5568;
  --color-text-inverse: #0a0e17;

  /* ---- Межі ---- */
  --color-border: rgba(46, 244, 223, 0.15);
  --color-border-hover: rgba(46, 244, 223, 0.4);

  /* ---- Статус ---- */
  --color-success: #48bb78;
  --color-error: #fc8181;

  /* ---- Шрифти ---- */
  --font-family: "Roboto", Arial, sans-serif;
  --font-size-xs: 0.75rem; /*  12px */
  --font-size-sm: 0.875rem; /*  14px */
  --font-size-base: 1rem; /*  16px */
  --font-size-lg: 1.125rem; /*  18px */
  --font-size-xl: 1.25rem; /*  20px */
  --font-size-2xl: 1.5rem; /*  24px */
  --font-size-3xl: 2rem; /*  32px */
  --font-size-4xl: 2.5rem; /*  40px */
  --font-size-hero: clamp(2rem, 5vw, 3.5rem); /* адаптивний */

  /* ---- Відступи ---- */
  --space-xs: 0.25rem; /*  4px */
  --space-sm: 0.5rem; /*  8px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 5rem; /* 80px */

  /* ---- Радіуси ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* ---- Тіні ---- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(46, 244, 223, 0.25);
  --shadow-glow-strong: 0 0 40px rgba(46, 244, 223, 0.4);

  /* ---- Переходи ---- */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s ease;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 70px;
}