/* Design tokens for the PathLens landing page.
   Starting point: the dark graphite primitives from
   tools/local-diag/frontend/tokens.css, copied as-is below (same
   values, so components ported from a tool page still look "in
   family"). Everything under LANDING REFINEMENTS is new — this page
   is the brand's front door and gets its own richer layer on top,
   not a flat reuse of a tool-page background. */

/* === PRIMITIVES (copied from local-diag) === */
:root {
  --primitive-color-graphite-50: #f5f6f8;
  --primitive-color-graphite-100: #e4e7eb;
  --primitive-color-graphite-200: #c8cdd4;
  --primitive-color-graphite-300: #a3aab5;
  --primitive-color-graphite-400: #7c8593;
  --primitive-color-graphite-500: #838c99;
  --primitive-color-graphite-600: #3d444d;
  --primitive-color-graphite-700: #2a3038;
  --primitive-color-graphite-800: #1c2126;
  --primitive-color-graphite-850: #161a1e;
  --primitive-color-graphite-900: #111417;
  --primitive-color-graphite-950: #0a0d10;
  --primitive-color-amber-400: #f5b942;
  --primitive-color-amber-500: #e8a628;
  --primitive-color-amber-600: #c4841a;
  --primitive-color-amber-950: #2b2008;
  --primitive-color-green-400: #4ade80;
  --primitive-color-green-500: #22c55e;
  --primitive-color-green-600: #16a34a;
  --primitive-color-green-950: #0a2313;
  --primitive-color-cyan-400: #22d3ee;
  --primitive-color-cyan-500: #06b6d4;
  --primitive-color-cyan-600: #0891b2;
  --primitive-color-cyan-950: #062a30;
  --primitive-color-red-400: #f87171;
  --primitive-color-red-500: #ef4444;
  --primitive-color-red-600: #dc2626;
  --primitive-color-red-950: #2b0a0a;
  --primitive-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --primitive-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --primitive-fontSize-xs: 0.75rem;
  --primitive-fontSize-sm: 0.8125rem;
  --primitive-fontSize-base: 0.9375rem;
  --primitive-fontSize-md: 1rem;
  --primitive-fontSize-lg: 1.125rem;
  --primitive-fontSize-xl: 1.375rem;
  --primitive-fontSize-2xl: 1.75rem;
  --primitive-fontSize-3xl: 2.25rem;
  --primitive-spacing-0: 0;
  --primitive-spacing-1: 0.25rem;
  --primitive-spacing-2: 0.5rem;
  --primitive-spacing-3: 0.75rem;
  --primitive-spacing-4: 1rem;
  --primitive-spacing-5: 1.25rem;
  --primitive-spacing-6: 1.5rem;
  --primitive-spacing-8: 2rem;
  --primitive-spacing-10: 2.5rem;
  --primitive-spacing-12: 3rem;
  --primitive-spacing-16: 4rem;
  --primitive-spacing-20: 5rem;
  --primitive-radius-sm: 4px;
  --primitive-radius-default: 6px;
  --primitive-radius-md: 8px;
  --primitive-radius-lg: 12px;
  --primitive-radius-full: 9999px;
  --primitive-duration-fast: 120ms;
  --primitive-duration-normal: 180ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* === SEMANTIC (copied from local-diag) === */
:root {
  --color-bg-base: #0a0d10;
  --color-bg-surface: #111417;
  --color-bg-elevated: #161a1e;
  --color-bg-inset: #1c2126;
  --color-border-subtle: #1c2126;
  --color-border-default: #2a3038;
  --color-border-strong: #3d444d;
  --color-text-primary: #e4e7eb;
  --color-text-secondary: #a3aab5;
  --color-text-muted: #838c99;
  --color-text-disabled: #3d444d;
  --color-accent-active: #e8a628;
  --color-accent-active-bright: #f5b942;
  --color-accent-active-bg: #2b2008;
  --color-accent-active-border: #c4841a;
  --color-accent-success: #22c55e;
  --color-accent-success-bright: #4ade80;
  --color-accent-success-bg: #0a2313;
  --color-accent-success-border: #16a34a;
  --color-accent-info: #06b6d4;
  --color-accent-info-bright: #22d3ee;
  --color-accent-info-bg: #062a30;
  --color-accent-info-border: #0891b2;
  --color-accent-danger: #ef4444;
  --color-accent-danger-bright: #f87171;
  --color-accent-danger-bg: #2b0a0a;
  --color-accent-danger-border: #dc2626;
  --font-family-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --spacing-section-gap: 1.5rem;
  --spacing-card-padding: 1.25rem;
  --spacing-inline-gap: 0.5rem;
}

/* === LANDING REFINEMENTS ===
   New for this page only — the tool pages stay flat-background
   utilities on purpose (calm, dense, low-drama, per docs/design-
   principles.md); the landing page is the one place a bit of depth
   and atmosphere earns its keep, since it's the only page selling the
   idea of the toolkit rather than helping someone through a task. */
:root {
  /* Hero background: a deep, barely-there cyan glow radiating from
     upper-center down into the same near-black the tool pages use, so
     the canvas network animation has real atmosphere to sit inside
     instead of flat #0a0d10. Deliberately subtle — this is meant to
     read as "depth," not "colored background." */
  --landing-hero-glow: radial-gradient(ellipse 120% 60% at 50% -10%, #0c2830 0%, #081418 32%, #0a0d10 65%);
  --landing-hero-vignette: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(10, 13, 16, 0.55) 0%, rgba(10, 13, 16, 0) 70%);
  --landing-hero-floor-fade: linear-gradient(180deg, rgba(10, 13, 16, 0) 0%, #0a0d10 100%);

  /* Canvas network animation palette — cyan-forward, distinct from the
     amber used for "active/current scope" meaning in the tool UIs
     (see docs/design-principles.md's palette-reservation guidance):
     amber means something specific elsewhere in this project, so the
     purely decorative hero animation stays out of that color entirely. */
  --landing-node-color: rgba(34, 211, 238, 0.55);
  --landing-node-color-dim: rgba(34, 211, 238, 0.22);
  --landing-line-color: rgba(8, 145, 178, 0.35);
  --landing-pulse-color: #67e8f9;
  --landing-pulse-glow: rgba(103, 232, 249, 0.9);

  /* Nav: translucent over the hero, solid once scrolled past it. */
  --landing-nav-bg: rgba(10, 13, 16, 0.72);
  --landing-nav-border: rgba(255, 255, 255, 0.06);

  /* Cards get a touch more presence than the flat step-cards used in
     tool pages — a soft border glow on hover signals "this is a link
     to another app," not just a static content block. */
  --landing-card-bg: #111417;
  --landing-card-border: #1c2126;
  --landing-card-border-hover: #0891b2;
  --landing-card-glow-hover: 0 0 0 1px rgba(8, 145, 178, 0.4), 0 8px 24px rgba(6, 182, 212, 0.08);

  --landing-stage-bg: #0e1216;
  --landing-stage-header-bg: rgba(17, 20, 23, 0.9);
  --landing-stage-border: #25323a;
  --landing-stage-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  --landing-stage-shadow-active: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(8, 145, 178, 0.12);

  --landing-badge-soon-bg: #1c2126;
  --landing-badge-soon-fg: #7c8593;
  --landing-badge-soon-border: #2a3038;
}