/* ── LeadFuel Design Tokens ────────────────────────────────────────────────
   Canonical CSS variables for the 5-app suite. Vendored byte-identical into
   each app's static/ directory (NovaHub, SmartICP, NovaHerald, NovaHound,
   NovaHawk). Source of truth = novahub/static/leadfuel-design-tokens.css;
   to update, edit there + copy to the other 4.

   Extracted from the 21 SVG feature-card illustrations shipped in May 2026
   (icp f3e9811, novaherald 251a319, novahound 5555315, novahawk 5bec36b,
   novahub 140e71e). Goal: every customer-visible page across the suite
   uses these tokens instead of bespoke hex / spacing / radius values.

   USAGE:
     <link rel="stylesheet" href="{{ url_for('static', filename='leadfuel-design-tokens.css') }}">
     Add to base.html BEFORE other CSS so subsequent stylesheets can
     override / extend via var(--lf-*).

   Tokens prefixed `--lf-*` to avoid collision with each app's existing
   intake.css `:root` block (which uses `--bg`, `--brand`, etc.).
   New code should prefer the `--lf-*` names.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color: surfaces ────────────────────────────────────────────── */
  --lf-bg:            #fafafa;   /* page background */
  --lf-bg-soft:       #f8fafc;   /* alt-row / panel background */
  --lf-surface:       #ffffff;   /* card surface */

  /* ── Color: ink + text hierarchy ─────────────────────────────────── */
  --lf-ink:           #0b081c;   /* primary text, dark headlines */
  --lf-ink-soft:      #374151;   /* body text, secondary headlines */
  --lf-muted:         #6b7280;   /* labels, captions */
  --lf-muted-soft:    #9ca3af;   /* placeholders, dim metadata */

  /* ── Color: lines + borders ──────────────────────────────────────── */
  --lf-border:        #e5e7eb;   /* card borders, input borders */
  --lf-border-soft:   #f1f3f7;   /* grid lines, separators */

  /* ── Color: brand + status ───────────────────────────────────────── */
  --lf-accent:        #dc2626;   /* primary CTA, brand red, active emphasis */
  --lf-accent-hover:  #b91c1c;   /* hover state, dark-red text on light bg */
  --lf-accent-soft:   #fef2f2;   /* danger-tinted backgrounds */
  --lf-accent-line:   #fecaca;   /* danger chip borders */

  --lf-success:       #16a34a;   /* won / connected / positive */
  --lf-success-dark:  #166534;
  --lf-success-soft:  #f0fdf4;
  --lf-success-line:  #bbf7d0;

  --lf-warning:       #f59e0b;
  --lf-warning-dark:  #92400e;
  --lf-warning-soft:  #fef3c7;
  --lf-warning-line:  #fde68a;

  --lf-info:          #0a66c2;   /* LinkedIn blue / informational */
  --lf-info-dark:     #1e40af;
  --lf-info-soft:     #eff6ff;
  --lf-info-line:     #bfdbfe;

  --lf-purple:        #a855f7;   /* secondary accent (rare) */

  /* ── Typography ──────────────────────────────────────────────────── */
  --lf-font:          -apple-system, BlinkMacSystemFont, "Segoe UI",
                       system-ui, "Helvetica Neue", Arial, sans-serif;
  --lf-font-mono:     "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;

  --lf-fs-xs:         11px;
  --lf-fs-sm:         13px;
  --lf-fs-md:         15px;
  --lf-fs-lg:         18px;
  --lf-fs-xl:         24px;
  --lf-fs-2xl:        36px;
  --lf-fs-3xl:        52px;       /* hero headlines */

  --lf-fw-regular:    400;
  --lf-fw-medium:     500;
  --lf-fw-semibold:   600;
  --lf-fw-bold:       700;
  --lf-fw-extrabold:  800;

  --lf-lh-tight:      1.2;
  --lf-lh-normal:     1.5;
  --lf-lh-relaxed:    1.65;

  /* ── Spacing scale ───────────────────────────────────────────────── */
  --lf-space-0:       0;
  --lf-space-1:       4px;
  --lf-space-2:       8px;
  --lf-space-3:       12px;
  --lf-space-4:       16px;
  --lf-space-5:       20px;
  --lf-space-6:       24px;
  --lf-space-8:       32px;
  --lf-space-10:      40px;
  --lf-space-12:      48px;
  --lf-space-16:      64px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --lf-radius-xs:     4px;
  --lf-radius-sm:     6px;       /* chips, small buttons */
  --lf-radius:        10px;      /* cards, inputs, primary buttons */
  --lf-radius-lg:     14px;      /* panels */
  --lf-radius-xl:     20px;      /* hero cards */
  --lf-radius-pill:   9999px;    /* pill chips */

  /* ── Shadows ────────────────────────────────────────────────────── */
  --lf-shadow-sm:     0 1px 2px rgba(11, 8, 28, 0.04);
  --lf-shadow:        0 2px 6px rgba(11, 8, 28, 0.06);   /* card default */
  --lf-shadow-lg:     0 12px 32px rgba(11, 8, 28, 0.10); /* modal / popover */
  --lf-shadow-focus:  0 0 0 3px rgba(220, 38, 38, 0.20); /* focus ring on CTA */

  /* ── Z-index ─────────────────────────────────────────────────────── */
  --lf-z-base:        1;
  --lf-z-sticky:      100;
  --lf-z-overlay:     500;
  --lf-z-modal:       1000;
  --lf-z-tooltip:     1500;

  /* ── Motion ──────────────────────────────────────────────────────── */
  --lf-transition:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --lf-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark mode (future) ─────────────────────────────────────────────
   The suite ships light-mode-only today (per theme.css). When dark mode
   re-lands, the tokens above flip via [data-theme="dark"] overrides
   declared here. For now this section is intentionally empty so the
   selector exists when needed. */
[data-theme="dark"] {
  /* TODO: dark-mode token overrides */
}

/* Reusable info tooltip — a small i that explains a concept in plain language. */
.lf-info { position:relative; display:inline-flex; align-items:center; justify-content:center;
           width:16px; height:16px; border-radius:50%; border:1px solid var(--lf-border,#1e1a33);
           color:var(--lf-muted,#6b7280); font-size:11px; line-height:1; cursor:help; font-style:normal;
           margin-left:5px; vertical-align:middle; font-weight:700; user-select:none; }
.lf-info:hover, .lf-info:focus { border-color:var(--lf-accent,#dc2626); color:var(--lf-accent,#dc2626); outline:none; }
.lf-info .lf-info-pop { display:none; position:absolute; bottom:calc(100% + 8px); left:50%;
           transform:translateX(-50%); width:250px; max-width:80vw; background:#1a1730; color:#fff;
           padding:9px 12px; border-radius:8px; font-size:12px; line-height:1.45; font-weight:400;
           text-align:left; box-shadow:0 8px 24px rgba(0,0,0,.32); z-index:60; white-space:normal; }
.lf-info:hover .lf-info-pop, .lf-info:focus .lf-info-pop { display:block; }