/**
 * Design tokens — transcribed from the 2026 design system (CLAUDE.md in the
 * design export). Values are fixed: do not invent new ones, extend here first.
 */

:root {
  /* Brand */
  --tim-magenta: #e6007e;
  --tim-magenta-hover: #ff1a8c;
  --tim-magenta-light: #ff4da6;
  --tim-glow-soft: rgba(230, 0, 126, 0.3);
  --tim-glow: rgba(230, 0, 126, 0.4);
  --tim-glow-strong: rgba(230, 0, 126, 0.55);

  /* Ink — text on light surfaces */
  --tim-ink: #141216;
  --tim-ink-700: #2c2930;
  --tim-ink-600: #4a4750;
  --tim-ink-500: #6f6a78;
  --tim-ink-400: #8a8590;

  /* Dark surfaces */
  --tim-dark: #0d0b0f;
  --tim-dark-panel: #131017;
  --tim-dark-panel-2: #16131b;
  --tim-on-dark: #fff;
  --tim-on-dark-muted: #b9b9c2;
  --tim-on-dark-dim: #8f8a97;

  /* Light surfaces */
  --tim-cream: #f2f0ed;
  --tim-card: #fff;
  --tim-chat-bg: #faf9f7;

  /* Channel accents — badges only, never as UI colour */
  --tim-google: #4285f4;
  --tim-facebook: #1877f2;
  --tim-instagram: #e1306c;
  --tim-tiktok: #25f4ee;
  --tim-seo: #34a853;
  --tim-gmb: #fbbc05;
  --tim-ai: #a78bfa;

  /* Type */
  --tim-font-display: "Unbounded", system-ui, sans-serif;
  --tim-font-body: "Space Grotesk", system-ui, sans-serif;
  --tim-font-quote: Georgia, "Times New Roman", serif;

  /* Radii */
  --tim-radius-pill: 100px;
  --tim-radius-card: 22px;
  --tim-radius-card-sm: 16px;

  /* Shadows */
  --tim-shadow-light: 0 20px 60px rgba(20, 18, 22, 0.1);
  --tim-shadow-light-strong: 0 20px 60px rgba(20, 18, 22, 0.16);
  --tim-shadow-dark: 0 40px 90px rgba(0, 0, 0, 0.5);
  --tim-shadow-cta: 0 12px 30px rgba(230, 0, 126, 0.4);

  /* Glass panel */
  --tim-glass-bg: rgba(255, 255, 255, 0.05);
  --tim-glass-border: rgba(255, 255, 255, 0.14);
  --tim-glass-blur: blur(10px);

  /* Hairlines */
  --tim-line-dark: rgba(255, 255, 255, 0.12);
  --tim-line-light: rgba(20, 18, 22, 0.08);

  /* Layout */
  --tim-container: 1280px;
  --tim-section-y: 120px;
  --tim-section-x: 64px;
  --tim-gap: 56px;

  /* Motion */
  --tim-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 760px) {
  :root {
    --tim-section-y: 80px;
    --tim-section-x: 24px;
    --tim-gap: 32px;
  }
}