/* ============================================================================
   Variation — LINEAR GRAYSCALE  (Linear.app-inspired)
   Strict monochrome on crisp white, hairline borders, dense technical UI.
   Linear's signature indigo is the only color, used sparingly as accent.
   Display: Inter · Body: Inter · Mono: Geist Mono
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&family=Geist+Mono:wght@400..600&display=swap');

:root {
  /* Surfaces */
  --canvas:      #ffffff;   /* pure white — crisp technical base */
  --raised:      #ffffff;
  --raised-2:    #f6f7f9;   /* hover fills, subtle wells */
  --inverse-bg:  #0c0d0e;   /* footer CTA + dark cards (near-black) */

  /* Ink */
  --ink:         #0d0e10;
  --ink-2:       #3b4045;
  --ink-3:       #696e76;
  --ink-4:       #9aa0a8;
  --on-accent:   #ffffff;
  --inverse-ink: #f6f7f9;
  --inverse-ink-2: #a7adb6;

  /* Lines */
  --hairline:    rgba(13,14,16,0.08);
  --hairline-2:  rgba(13,14,16,0.13);

  /* Accent — Linear's signature indigo, used sparingly */
  --accent:      #5e6ad2;
  --accent-2:    #4b56c0;   /* darker for text legibility on white */
  --accent-soft: #eef0fb;

  /* State (conventional — product UI must read correctly) */
  --ok:        #15803d; --ok-bg:    #f0fdf4; --ok-bd:    #bbf7d0;
  --warn:      #b45309; --warn-bg:  #fffbeb; --warn-bd:  #fde68a;
  --danger:    #dc2626; --danger-bg:#fef2f2; --danger-bd:#fecaca;
  --info:      #2563eb; --info-bg:  #eff6ff; --info-bd:  #bfdbfe;

  /* Revenue + cluster pills — themed to the brand indigo for cohesion */
  --tier-bg:   #eef0fb; --tier-fg:  #4b56c0; --tier-bd:  #dfe3f7;
  --cluster-bg:#eef0fb; --cluster-fg:#4b56c0; --cluster-bd:#dfe3f7;

  /* Shadows — minimal, crisp, neutral-tinted */
  --shadow-sm:   0 1px 2px rgba(13,14,16,0.06);
  --shadow-card: 0 1px 3px rgba(13,14,16,0.08), 0 1px 2px rgba(13,14,16,0.04);
  --shadow-pop:  0 8px 24px -6px rgba(13,14,16,0.12);
  --shadow-hero: 0 18px 50px -20px rgba(13,14,16,0.18), 0 4px 10px rgba(13,14,16,0.05);

  /* Type */
  --font-display: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --weight-display: 600;
  --tracking-display: -0.022em;
  --tracking-h2: -0.018em;
  --hero-size: clamp(2.3rem, 4.4vw, 3.7rem);
  --h1-size:   clamp(1.9rem, 3.4vw, 2.9rem);
  --h2-size:   clamp(1.8rem, 3vw, 2.5rem);
  --h3-size:   1.0625rem;
  --eyebrow-size: 11px;

  /* Shape */
  --r-sm: 4px; --r: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px;
  --maxw: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
}