/* ==========================================================================
   Design Tokens — ShopBot AI Landing
   Джерело: CLAUDE.md §2 (UI/UX & Дизайн-система)
   Стиль: Cyberpunk / Modern Tech (Dark Mode)
   ========================================================================== */

:root {
  /* ---- Colors ---- */
  --color-bg: #0a0e17;              /* Deep Space */
  --color-bg-elevated: #0f1420;     /* трохи світліший фон для карток-підложок */
  --color-accent-cyan: #00d4ff;     /* Neon Cyan — довіра, технологічність */
  --color-accent-purple: #7c3aed;   /* Deep Purple — градієнти, glow */
  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-success: #22c55e;         /* для "живі залишки", позитивних станів */
  --color-danger: #ef4444;          /* для попереджень/помилок форми */

  /* ---- Gradients ---- */
  --gradient-primary: linear-gradient(135deg, var(--color-accent-cyan) 0%, var(--color-accent-purple) 100%);
  --gradient-glow: radial-gradient(circle at 50% 0%, rgba(0, 212, 255, 0.25) 0%, rgba(124, 58, 237, 0.15) 45%, transparent 70%);

  /* ---- Glassmorphism ---- */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;

  /* ---- Typography ---- */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  /* Моноширинний — для editorial-міток/eyebrows та технічних лейблів */
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Courier New', monospace;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Type scale — mobile-first (viewport 320px), стелі для desktop через clamp() */
  --fs-h1: clamp(1.875rem, 5vw + 1rem, 3.5rem);   /* 30px → 56px */
  --fs-h2: clamp(1.5rem, 3vw + 1rem, 2.5rem);     /* 24px → 40px */
  --fs-h3: clamp(1.25rem, 2vw + 0.75rem, 1.75rem);/* 20px → 28px */
  --fs-body-lg: clamp(1.0625rem, 1vw + 0.85rem, 1.25rem); /* 17px → 20px */
  --fs-body: 1rem;       /* 16px */
  --fs-small: 0.875rem;  /* 14px */
  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-24: 6rem;    /* 96px */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-padding: var(--space-4);
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* ---- Shadows / Glow ---- */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glow-cyan: 0 0 24px rgba(0, 212, 255, 0.35);
  --glow-purple: 0 0 24px rgba(124, 58, 237, 0.35);
  /* Преміум: багатошарова "піднята" тінь + м'яке кольорове сяйво під карткою */
  --shadow-elevated:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 12px 40px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px var(--glass-border);
  --shadow-elevated-hover:
    0 1px 0 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 60px -18px rgba(0, 0, 0, 0.7),
    0 0 40px -8px rgba(0, 212, 255, 0.28);

  /* ---- Ambient lighting (кінематографічні світлові плями) ---- */
  --orb-cyan: radial-gradient(circle at center, rgba(0, 212, 255, 0.5) 0%, rgba(0, 212, 255, 0) 65%);
  --orb-purple: radial-gradient(circle at center, rgba(124, 58, 237, 0.5) 0%, rgba(124, 58, 237, 0) 65%);
  /* верхнє світло-підсвітка для скляних поверхонь (frosted glass highlight) */
  --glass-highlight: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 40%);
  /* тонка технологічна сітка для фону секцій */
  --grid-line: rgba(148, 163, 184, 0.05);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;

  /* ---- Breakpoints (для довідки в JS/коментарях, CSS використовує @media напряму) ---- */
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;
}

/* Base reset opinionated мінімум — детальний reset додається у Фазі 4 (верстка) */
* { box-sizing: border-box; }
body {
  background: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
h1, h2, h3 {
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-heading);
  color: var(--color-text-primary);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }