/* ── 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 = THIS FILE, novahub/static/brand/v1/
   tokens-leadfuel.css (the root copy static/leadfuel-design-tokens.css was
   removed on 2026-10-05, ONE-PLACE-DESIGN: one tokens file, served at the
   Brandkit URL); to update, edit here + re-vendor into the consumers.

   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='brand/v1/tokens-leadfuel.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 */
  /* Fixed-dark FILL for header bars/pills/buttons that must read as a dark
     surface with white text in BOTH themes (matches .lf-card-hdr's own
     hardcoded #14121e in leadfuel-ui.css). Same convention as icp's
     --ws-band bridge: --lf-ink is a TEXT role and flips to white in dark
     mode, so using it as a `background` turns the bar white-on-white —
     that recurring bug is exactly what this token exists to prevent.
     Deliberately NOT overridden under [data-theme="dark"] below, so it
     never flips. */
  --lf-fill-ink:      #14121e;   /* on-fill surface — pair with #fff text */

  /* ── 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-accent-lit:    #ffb3a8;   /* accent text on dark surfaces */
  --lf-accent-grad:   linear-gradient(95deg, #ff6b5b, #dc2626); /* primary CTA + gradient headings */
  --lf-brand:         var(--lf-accent);   /* alias: primary action fill (goal workspace, wall) */

  --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-warning-text:  #92400e;   /* amber AS TEXT: 7.1:1 on white, 6.3:1 on cream. --lf-warning is a FILL; as text it was ~1.9:1 */

  /* danger has its own hue (rose), distinct from the brand red: "this is us" and "this is broken" must not share a colour */
  --lf-danger:        #be123c;
  --lf-danger-dark:   #881337;
  --lf-danger-text:   #be123c;   /* 6.5:1 on white */
  --lf-danger-soft:   #fff1f2;
  --lf-danger-line:   #fecdd3;

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

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

  /* ── One place (/command): states, depth, chrome ──────────────────
     ONE-PLACE-DESIGN, 2026-10-05. Colour marks exceptions only (R8) and
     always travels with a word. READY carries no hue: it is quiet ink.
     UNKNOWN is never a plain fill: a hollow dot, a dashed line or a hatch
     stroked in --lf-state-unknown. DEGRADED is a half-filled dot. BROKEN is
     solid. Validated 2026-10-05 (palette_check in the design PR): text
     >= 4.5:1 on --lf-bg and --lf-surface, fills >= 3:1 on --lf-bg, and every
     adjacent pair stays apart under protan / deutan / tritan simulation. */
  --lf-state-ready:         #c5c7d6;   /* quiet fill for a composition segment, never a signal */
  --lf-state-ready-text:    var(--lf-ink-soft);
  --lf-state-degraded:      #a16207;
  --lf-state-degraded-text: #b45309;
  --lf-state-degraded-soft: #fffbeb;
  --lf-state-broken:        #e11d48;
  --lf-state-broken-text:   #be123c;
  --lf-state-broken-soft:   #fff1f2;
  --lf-state-unknown:       #4b4e5c;   /* hatch or dashed stroke only */
  --lf-state-unknown-text:  #4b4e5c;
  --lf-state-idle:          #dcdde8;
  --lf-state-idle-text:     #6b6b80;
  --lf-ok:                  #0d9488;   /* a landed outcome, a receipt: the one positive hue, used beside a word */
  --lf-ok-text:             #0f766e;

  /* depth: the planes behind the shell. Dark reads deep, light reads layered. */
  --lf-depth-0:       #eeeef3;   /* the void behind the map */
  --lf-depth-1:       var(--lf-bg);
  --lf-depth-2:       var(--lf-surface);
  --lf-depth-3:       #ffffff;   /* raised: the ask box, the focus card */
  --lf-grid:          rgba(11, 8, 28, 0.05);   /* the faint lattice behind MAP and WALL */
  --lf-glow:          0 0 0 1px rgba(220, 38, 38, 0.45), 0 0 20px rgba(220, 38, 38, 0.12);
  --lf-selected:      var(--lf-accent);   /* means selected / you, nothing else */
  --lf-ink-on-accent: #ffffff;

  /* chrome sizes shared by the phone, the laptop and the wall */
  --lf-tap:           44px;    /* minimum hit target */
  --lf-bar:           56px;    /* top bar */
  --lf-tabs:          48px;    /* view tabs */
  --lf-fs-floor:      13px;    /* smallest text on a laptop */
  --lf-fs-wall-floor: 18px;    /* smallest text in wall mode, read from 3 m */
  --lf-fs-wall-apex:  clamp(40px, 5vw, 72px);

  /* ── 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 (fixed) */
  --lf-fs-h2:         clamp(26px, 3.4vw, 42px); /* fluid section headings (north star) */
  --lf-fs-h1:         clamp(30px, 3.6vw, 48px); /* fluid hero headline (north star) */

  --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;
  --lf-space-24:      96px;       /* marketing section rhythm (north star) */

  /* ── 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 ───────────────────────────────────────────────────────
   Business (red) dark palette, derived from the hub-homepage north star
   (marketing_landing.html :root). Flip by setting data-theme="dark" on
   <html>. Only the values that change are overridden; brand red + status
   hues carry through from :root. */
[data-theme="dark"] {
  /* surfaces */
  --lf-bg:            #050409;
  --lf-bg-soft:       #0b0a17;
  --lf-surface:       #0f0e1c;
  /* ink + text hierarchy */
  --lf-ink:           #ffffff;
  --lf-ink-soft:      rgba(255, 255, 255, 0.85);
  --lf-muted:         rgba(255, 255, 255, 0.70);
  --lf-muted-soft:    rgba(255, 255, 255, 0.45);
  /* lines + borders */
  --lf-border:        rgba(255, 255, 255, 0.10);
  --lf-border-soft:   rgba(255, 255, 255, 0.06);
  /* brand + status tints re-tuned for dark surfaces */
  --lf-accent-soft:   rgba(220, 38, 38, 0.14);
  --lf-accent-line:   rgba(220, 38, 38, 0.40);
  --lf-success-soft:  rgba(22, 163, 74, 0.16);
  --lf-success-line:  rgba(22, 163, 74, 0.40);
  --lf-warning-soft:  rgba(245, 158, 11, 0.16);
  --lf-warning-line:  rgba(245, 158, 11, 0.40);
  --lf-warning-text:  #fbbf24;   /* amber text on dark surfaces */
  --lf-danger:        #fb7185;
  --lf-danger-text:   #fda4af;
  --lf-danger-soft:   rgba(244, 63, 94, 0.14);
  --lf-danger-line:   rgba(244, 63, 94, 0.40);
  --lf-info-soft:     rgba(10, 102, 194, 0.18);
  --lf-info-line:     rgba(10, 102, 194, 0.45);
  /* shadows deepen on dark */
  --lf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.40);
  --lf-shadow:        0 2px 8px rgba(0, 0, 0, 0.50);
  --lf-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.60);
  /* one place: light values of the state, depth and chrome tokens */
  --lf-state-ready:         #3f3f52;
  --lf-state-degraded:      #fbbf24;
  --lf-state-degraded-text: #fbbf24;
  --lf-state-degraded-soft: rgba(251, 191, 36, 0.14);
  --lf-state-broken:        #fb7185;
  --lf-state-broken-text:   #fda4af;
  --lf-state-broken-soft:   rgba(244, 63, 94, 0.14);
  --lf-state-unknown:       #62627a;
  --lf-state-unknown-text:  #8e8e9e;
  --lf-state-idle:          #262633;
  --lf-state-idle-text:     #6b6b80;
  --lf-ok:                  #2dd4bf;
  --lf-ok-text:             #2dd4bf;
  --lf-depth-0:             #020206;
  --lf-depth-3:             #16152a;
  --lf-grid:                rgba(255, 255, 255, 0.04);
  --lf-glow:                0 0 0 1px rgba(220, 38, 38, 0.55), 0 0 24px rgba(220, 38, 38, 0.22);
  --lf-selected:            var(--lf-accent-lit);
}

/* 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; }