/* ── Novah (Personal) Design Tokens ────────────────────────────────────────
   The personal-family sibling of leadfuel-design-tokens.css. IDENTICAL
   --lf-* variable NAMES, different VALUES (Novah indigo skin), so the shared
   component kit (leadfuel-ui.css) and walkthrough engine work byte-identical
   across both families. A surface is re-skinned by swapping WHICH token file
   it links — never by editing markup.

   Personal family = Echo + Lucid (Novah indigo/violet). DARK is the default
   mode; light is the [data-theme="light"] override. See docs/SKINS.md
   (non-negotiable). Source of truth = novahub/static/novah-design-tokens.css;
   vendored byte-identical into echo/ and lucid/ static dirs.

   USAGE:
     <link rel="stylesheet" href="{{ url_for('static', filename='novah-design-tokens.css') }}">
     before leadfuel-ui.css, so the kit reads these --lf-* values.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* ── Color: surfaces (DARK = default) ────────────────────────────── */
  --lf-bg:            #09090e;   /* page background */
  --lf-bg-soft:       #101019;   /* alt-row / panel background */
  --lf-surface:       #101019;   /* card surface */

  /* ── Color: ink + text hierarchy ─────────────────────────────────── */
  --lf-ink:           #ECECF1;   /* primary text */
  --lf-ink-soft:      rgba(236, 236, 241, 0.85);  /* body / secondary */
  --lf-muted:         #8e8e9e;   /* labels, captions */
  --lf-muted-soft:    #6b6b80;   /* placeholders, dim metadata */

  /* ── Color: lines + borders ──────────────────────────────────────── */
  --lf-border:        #262633;   /* card / input borders */
  --lf-border-soft:   rgba(255, 255, 255, 0.06);  /* grid lines, separators */

  /* ── Color: brand + status (indigo skin) ─────────────────────────── */
  --lf-accent:        #6366F1;   /* primary CTA, brand indigo */
  --lf-accent-hover:  #8b5cf6;   /* hover / violet */
  --lf-accent-soft:   rgba(99, 102, 241, 0.12);   /* accent-tinted backgrounds */
  --lf-accent-line:   #2c2a55;   /* accent chip borders */
  --lf-accent-lit:    #b9b6ff;   /* accent text on dark surfaces */
  --lf-accent-grad:   linear-gradient(95deg, #6366F1, #8b5cf6); /* primary CTA + gradient headings */

  --lf-success:       #34d399;
  --lf-success-dark:  #059669;
  --lf-success-soft:  rgba(52, 211, 153, 0.14);
  --lf-success-line:  rgba(52, 211, 153, 0.40);

  --lf-warning:       #fbbf24;
  --lf-warning-dark:  #b45309;
  --lf-warning-soft:  rgba(251, 191, 36, 0.14);
  --lf-warning-line:  rgba(251, 191, 36, 0.40);

  --lf-info:          #0a66c2;   /* informational (skin-independent) */
  --lf-info-dark:     #1e40af;
  --lf-info-soft:     rgba(10, 102, 194, 0.18);
  --lf-info-line:     rgba(10, 102, 194, 0.45);

  --lf-purple:        #a855f7;

  /* ── Typography (shared scale) ───────────────────────────────────── */
  --lf-font:          -apple-system, BlinkMacSystemFont, "Segoe UI",
                       system-ui, Roboto, "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;
  --lf-fs-h2:         clamp(26px, 3.4vw, 42px);
  --lf-fs-h1:         clamp(30px, 3.6vw, 48px);

  --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 (shared) ──────────────────────────────────────── */
  --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;

  /* ── Radii (shared) ──────────────────────────────────────────────── */
  --lf-radius-xs:     4px;
  --lf-radius-sm:     6px;
  --lf-radius:        10px;
  --lf-radius-lg:     14px;
  --lf-radius-xl:     20px;
  --lf-radius-pill:   9999px;

  /* ── Shadows (deeper on dark) ────────────────────────────────────── */
  --lf-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.40);
  --lf-shadow:        0 8px 24px -16px rgba(0, 0, 0, 0.60);
  --lf-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.60);
  --lf-shadow-focus:  0 0 0 3px rgba(99, 102, 241, 0.18);

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

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

/* ── Light mode (override) ───────────────────────────────────────────
   Personal defaults dark; this is the opt-in light palette. Indigo brand
   carries through; only surfaces/ink/borders flip. */
[data-theme="light"] {
  --lf-bg:            #f4f5fa;
  --lf-bg-soft:       #ffffff;
  --lf-surface:       #ffffff;
  --lf-ink:           #0b0c14;
  --lf-ink-soft:      rgba(28, 30, 46, 0.82);
  --lf-muted:         rgba(30, 32, 46, 0.66);
  --lf-muted-soft:    rgba(30, 32, 46, 0.45);
  --lf-border:        rgba(10, 12, 30, 0.10);
  --lf-border-soft:   rgba(10, 12, 30, 0.06);
  --lf-accent-soft:   rgba(99, 102, 241, 0.10);
  --lf-accent-line:   #c7c9f5;
  --lf-accent-grad:   linear-gradient(95deg, #5048e5, #7c3aed); /* darker in light mode so gradient headings stay readable on white */
  --lf-success-soft:  #ecfdf5;
  --lf-success-line:  #a7f3d0;
  --lf-warning-soft:  #fffbeb;
  --lf-warning-line:  #fde68a;
  --lf-info-soft:     #eff6ff;
  --lf-info-line:     #bfdbfe;
  --lf-shadow-sm:     0 1px 2px rgba(11, 12, 20, 0.04);
  --lf-shadow:        0 2px 6px rgba(11, 12, 20, 0.06);
  --lf-shadow-lg:     0 12px 32px rgba(11, 12, 20, 0.10);
}

/* Reusable info tooltip — identical to the business kit so .lf-info works
   on personal pages too. */
.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,#262633);
           color:var(--lf-muted,#8e8e9e); 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,#6366F1); color:var(--lf-accent-lit,#b9b6ff); 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,.5); z-index:60; white-space:normal; }
.lf-info:hover .lf-info-pop, .lf-info:focus .lf-info-pop { display:block; }