/* ============================================================================
   Proxi landing - design tokens.  Warm "olive operational" system:
   a warm off-white canvas, green-black ink, hairline warm borders, and ONE
   disciplined olive accent for live / synced moments. The voice is Familjen
   Grotesk (a warm, characterful grotesque) for display AND marketing body;
   Inter carries in-mockup product UI (via --font-product) so screenshots read
   as the real app; Geist Mono carries product data + issue keys.
   Swap these tokens -> the whole page re-themes.
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:ital,wght@0,400..700;1,400..700&family=Inter:wght@400..600&family=Geist+Mono:wght@400..500&display=swap');

:root {
  /* Surfaces - warm off-white canvas so white cards lift a hair. The
     product-showcase fills (--raised-2 / --panel-soft) stay NEUTRAL gray —
     green lives in the accents and the hero/CTA panels, not in UI chrome. */
  --canvas:      #fbfbf7;
  --raised:      #ffffff;
  --raised-2:    #f2f2ef;
  --panel-soft:  #f5f5f2;
  --inverse-bg:  #191b12;

  /* Ink - near-black with a green cast, softened from pure #000 */
  --ink:         #191b12;
  --ink-2:       #5c6150;
  --ink-3:       #6b7159;
  --ink-4:       #a3a692;
  --on-accent:   #ffffff;
  --inverse-ink: #fbfbf7;
  --inverse-ink-2: #b9bda8;

  /* Lines - near-neutral warm grays (borders shouldn't read green either) */
  --hairline:    #ebeae5;
  --hairline-2:  #e5e4dd;
  --line-strong: #dbdad1;

  /* Accent - brand olive, used sparingly (live/sync/eyebrows only) */
  --accent:      #4f6220;
  --accent-2:    #3d4923;
  --accent-soft: #e6ebd2;
  --live:        #5f7d2a;

  /* Product-UI state colors (used only inside mockups, never as decoration).
     Warm-tuned to sit on the olive canvas; ok/warn are the template's own
     sage "merged" and ochre "stale" chip hues. */
  --ok:        #3d4923; --ok-bg:    #e6ebd2; --ok-bd:    #d3dcb6;
  --warn:      #8a6b1f; --warn-bg:  #f2ecd6; --warn-bd:  #e6dab4;
  --danger:    #b3402f; --danger-bg:#f7ebe6; --danger-bd:#ecd2c8;
  --info:      #2f5faa; --info-bg:  #eef2f9; --info-bd:  #d7e0ef;
  --tier-bg:   #e6ebd2; --tier-fg:  #3d4923; --tier-bd:  #d3dcb6;
  --cluster-bg:#e6ebd2; --cluster-fg:#3d4923; --cluster-bd:#d3dcb6;

  /* Marketing panels - the hero product panel backdrop. "Stone" gray tone
     from the design handoff (its Olive sibling read too green in situ). */
  --panel-grad-1: #eeeeea;
  --panel-grad-2: #e2e2da;
  --selection:    #dde3c6;

  /* Shadows - soft, low, warm-tinted (calm, not glossy) */
  --shadow-sm:   0 1px 2px rgba(35,40,20,0.05);
  --shadow-card: 0 8px 20px rgba(35,40,20,0.06), 0 1px 2px rgba(35,40,20,0.04);
  --shadow-pop:  0 12px 30px rgba(35,40,20,0.08);
  --shadow-hero: 0 24px 60px rgba(35,40,20,0.18), 0 6px 14px rgba(35,40,20,0.05);

  /* Type */
  --font-display: "Familjen Grotesk", system-ui, sans-serif;
  --font-body:    "Familjen Grotesk", system-ui, sans-serif;
  --font-product: "Inter", -apple-system, system-ui, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, monospace;
  --weight-display: 600;
  --tracking-display: -0.035em;
  --tracking-h2: -0.03em;
  --hero-size: clamp(2.9rem, 6.2vw, 4.75rem);
  --h1-size:   clamp(2rem, 3.6vw, 3rem);
  --h2-size:   clamp(2.1rem, 3.9vw, 3rem);
  --h3-size:   1.25rem;
  --eyebrow-size: 13px;

  /* Shape */
  --r-sm: 5px; --r: 7px; --r-md: 9px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 26px;
  --r-pill: 999px;
  --maxw: 1160px;
  --ease: cubic-bezier(.16,1,.3,1);
}