/* ═══════════════════════════════════════════════════════════════
   Напомни-ка! — Landing Design Tokens
   Приведены в соответствие с SPA (tokens.css)
   🎨 Notion-inspired warm paper palette
   🔵 Primary: #0075de (синий) — единый с приложением
   ⚡ Accent: #D97706 (янтарный) — только для маркетинговых CTA
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Brand & Accent ─── */
  --l-primary: #0075DE;
  --l-primary-hover: #005BAB;
  --l-primary-soft: rgba(0, 117, 222, 0.08);
  --l-accent: #D97706;
  /* янтарный — только CTA */
  --l-accent-hover: #B45309;
  --l-accent-soft: rgba(217, 119, 6, 0.10);

  /* ─── Surfaces ─── */
  --l-canvas: #F6F5F4;
  /* = SPA color-canvas-soft */
  --l-surface: #FFFFFF;
  --l-surface-alt: #F0EFED;
  /* чуть темнее canvas */

  /* ─── Text ─── */
  --l-ink: rgba(0, 0, 0, 0.95);
  /* = SPA color-ink */
  --l-ink-secondary: #31302E;
  --l-ink-muted: #615D59;
  /* = SPA color-ink-muted */
  --l-ink-faint: #A39E98;
  /* = SPA color-ink-faint */

  /* ─── Borders ─── */
  --l-hairline: #E6E6E6;
  /* = SPA */
  --l-hairline-strong: #D4D0C5;

  /* ─── Semantic ─── */
  --l-danger: #D93025;
  /* = SPA */
  --l-success: #1AAE39;
  /* = SPA */
  --l-success-soft: #E8F5E9;
  --l-danger-soft: #FCE4EC;

  /* ─── Градиенты (только CTA) ─── */
  --l-gradient-cta: linear-gradient(135deg, #0075DE 0%, #62AEF0 100%);

  /* ─── Hero-glow ─── */
  --l-gradient-hero: radial-gradient(ellipse at 50% 40%,
      rgba(0, 117, 222, 0.06) 0%,
      transparent 70%);

  /* ─── Тени (barely-there, как в SPA) ─── */
  --l-shadow-sm:
    0 0.175px 1.041px rgba(0, 0, 0, 0.01),
    0 0.8px 2.925px rgba(0, 0, 0, 0.02),
    0 2.025px 7.847px rgba(0, 0, 0, 0.027),
    0 4px 18px rgba(0, 0, 0, 0.04);
  --l-shadow-md:
    0 0.5px 1.5px rgba(0, 0, 0, 0.01),
    0 2px 5px rgba(0, 0, 0, 0.02),
    0 5px 15px rgba(0, 0, 0, 0.03),
    0 12px 30px rgba(0, 0, 0, 0.04),
    0 23px 52px rgba(0, 0, 0, 0.05);
  --l-shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.02),
    0 4px 8px rgba(0, 0, 0, 0.03),
    0 10px 24px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.05);

  /* ─── Типографика ─── */
  --l-font-sans: 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --l-font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* ─── Адаптивные размеры (clamp) ─── */
  --l-h1: clamp(2.25rem, 4.5vw + 1rem, 4rem);
  /* 36–64px */
  --l-h2: clamp(1.75rem, 2.5vw + 1rem, 2.625rem);
  /* 28–42px */
  --l-h3: clamp(1.375rem, 1.5vw + 1rem, 1.75rem);
  /* 22–28px */
  --l-body: clamp(1rem, 0.75vw + 0.75rem, 1.125rem);
  /* 16–18px */
  --l-small: clamp(0.9375rem, 0.5vw + 0.75rem, 1rem);
  /* 15–16px */
  --l-micro: 0.8125rem;
  /* 13px */

  /* ─── Спейсинг (как в SPA) ─── */
  --l-space-1: 0.25rem;
  /* 4px */
  --l-space-2: 0.5rem;
  /* 8px */
  --l-space-3: 0.75rem;
  /* 12px */
  --l-space-4: 1rem;
  /* 16px */
  --l-space-5: 1.25rem;
  /* 20px */
  --l-space-6: 1.5rem;
  /* 24px */
  --l-space-8: 2rem;
  /* 32px */
  --l-space-10: 2.5rem;
  /* 40px */
  --l-space-12: 3rem;
  /* 48px */
  --l-space-16: 4rem;
  /* 64px */
  --l-space-24: 6rem;
  /* 96px */
  --l-space-32: 8rem;

  /* ─── Скругления (как в SPA) ─── */
  --l-radius-xs: 4px;
  --l-radius-sm: 6px;
  --l-radius-md: 8px;
  --l-radius-lg: 12px;
  --l-radius-xl: 16px;
  --l-radius-pill: 9999px;

  /* ─── Переходы ─── */
  --l-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --l-duration-fast: 150ms;
  --l-duration-normal: 250ms;
  --l-duration-slow: 400ms;

  /* ─── Контейнер ─── */
  --l-container-max: 1280px;
  --l-container-pad: var(--l-space-4);
}

/* ═══ Тёмная тема ═══ */
[data-theme="dark"] {
  --l-canvas: #17160F;
  --l-surface: #1F1E17;
  --l-surface-alt: #26241C;
  --l-ink: #F5F3EC;
  --l-ink-muted: #B8B3A5;
  --l-ink-faint: #7A7566;

  --l-primary: #62AEF0;
  /* sky-акцент, контраст ~8:1 */
  --l-primary-hover: #7BBDF5;
  --l-primary-soft: rgba(98, 174, 240, 0.12);
  --l-accent: #FBBF24;
  --l-accent-hover: #F59E0B;
  --l-accent-soft: rgba(251, 191, 36, 0.12);

  --l-danger: #F87171;
  --l-success: #4ADE80;
  --l-success-soft: rgba(74, 222, 128, 0.12);
  --l-danger-soft: rgba(248, 113, 113, 0.12);

  --l-hairline: #2E2C23;
  --l-hairline-strong: #3D3B2F;

  --l-gradient-hero: radial-gradient(ellipse at 50% 40%,
      rgba(98, 174, 240, 0.06) 0%,
      transparent 70%);

  --l-shadow-sm:
    0 0.175px 1.041px rgba(0, 0, 0, 0.3),
    0 0.8px 2.925px rgba(0, 0, 0, 0.35),
    0 2.025px 7.847px rgba(0, 0, 0, 0.4);
  --l-shadow-md:
    0 0.5px 1.5px rgba(0, 0, 0, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.35),
    0 5px 15px rgba(0, 0, 0, 0.4),
    0 12px 30px rgba(0, 0, 0, 0.45);
  --l-shadow-lg:
    0 1px 2px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 0, 0, 0.35),
    0 10px 24px rgba(0, 0, 0, 0.4);
}

/* ═══ Авто-тема по системе ═══ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --l-canvas: #17160F;
    --l-surface: #1F1E17;
    --l-surface-alt: #26241C;
    --l-ink: #F5F3EC;
    --l-ink-muted: #B8B3A5;
    --l-ink-faint: #7A7566;

    --l-primary: #62AEF0;
    --l-primary-hover: #7BBDF5;
    --l-primary-soft: rgba(98, 174, 240, 0.12);
    --l-accent: #FBBF24;
    --l-accent-hover: #F59E0B;
    --l-accent-soft: rgba(251, 191, 36, 0.12);

    --l-danger: #F87171;
    --l-success: #4ADE80;

    --l-hairline: #2E2C23;
    --l-hairline-strong: #3D3B2F;

    --l-gradient-hero: radial-gradient(ellipse at 50% 40%,
        rgba(98, 174, 240, 0.06) 0%,
        transparent 70%);

    --l-shadow-sm:
      0 0.175px 1.041px rgba(0, 0, 0, 0.3),
      0 0.8px 2.925px rgba(0, 0, 0, 0.35),
      0 2.025px 7.847px rgba(0, 0, 0, 0.4);
    --l-shadow-md:
      0 0.5px 1.5px rgba(0, 0, 0, 0.3),
      0 2px 5px rgba(0, 0, 0, 0.35),
      0 5px 15px rgba(0, 0, 0, 0.4),
      0 12px 30px rgba(0, 0, 0, 0.45);
    --l-shadow-lg:
      0 1px 2px rgba(0, 0, 0, 0.3),
      0 4px 8px rgba(0, 0, 0, 0.35),
      0 10px 24px rgba(0, 0, 0, 0.4);
  }
}