/* ============================================================================
   TrickGrid landing — design tokens (LIGHT theme)
   Brand: utilitarian SaaS for SMBs. Distinct, confident, no-fluff.
   Cream/off-white surface + slate ink + lime accent. The dashboard mockup
   stays dark (overrides the vars) so the product preview pops against the
   bright page — Linear/Stripe pattern.
   ========================================================================= */

:root {
  /* ── Color: cream surface + slate ink + lime accent + warm orange ───────── */
  --bg-0: #FBFAF6;       /* page bg — warm off-white, NOT pure white */
  --bg-1: #FFFFFF;       /* card surface */
  --bg-2: #F4F2EB;       /* hover/elevated surface */
  --bg-3: #E8E5DA;       /* dividers on cream */

  --line: rgba(15, 23, 42, 0.08);
  --line-strong: rgba(15, 23, 42, 0.16);

  --ink: #0F172A;        /* primary text */
  --ink-muted: #475569;  /* secondary text */
  --ink-faint: #94A3B8;  /* tertiary */

  --accent: #84CC16;     /* lime — readable on white, energetic */
  --accent-soft: rgba(132, 204, 22, 0.14);
  --accent-deep: #65A30D;
  --accent-glow: rgba(132, 204, 22, 0.32);

  --warm: #F97316;       /* orange — humanizing accent for big stats / icons */
  --warm-soft: rgba(249, 115, 22, 0.12);

  --danger: #DC2626;
  --good: #16A34A;

  /* Dashboard mockup keeps a dark theme. These are referenced by overriding
     the vars inside `.dashboard-card` for instant theme inversion. */
  --dash-bg-0: #0A0E1A;
  --dash-bg-1: #0F1426;
  --dash-bg-2: #161D33;
  --dash-line: rgba(255, 255, 255, 0.07);
  --dash-line-strong: rgba(255, 255, 255, 0.14);
  --dash-ink: #F8FAFC;
  --dash-ink-muted: #94A3B8;
  --dash-ink-faint: #64748B;

  /* ── Type ──────────────────────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.4vw, 2.875rem);
  --fs-3xl: clamp(2.625rem, 1.7rem + 4.2vw, 4.5rem);
  --fs-4xl: clamp(3.25rem, 2rem + 5.5vw, 6rem);

  /* ── Spacing (8px base) ────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container: 1200px;
  --container-narrow: 880px;
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snappy: cubic-bezier(0.5, 0.9, 0.2, 1.05);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 600ms;

  /* ── Shadows (need to be heavier on light bg to give cards depth) ──────── */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 12px 32px -8px rgba(15, 23, 42, 0.10);
  --shadow-lift: 0 2px 4px rgba(15, 23, 42, 0.06), 0 24px 48px -12px rgba(15, 23, 42, 0.18);
  --shadow-dashboard: 0 4px 8px rgba(15, 23, 42, 0.06), 0 32px 64px -16px rgba(15, 23, 42, 0.28);
  --shadow-glow: 0 0 0 1px var(--accent), 0 12px 32px -8px var(--accent-glow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}