/* =====================================================================
   Leadlance theme - the single source of truth for colour and type.
   Light by default, dark when the visitor's system is dark.
   Every page links this file; change a value here and every page follows.
   Force a mode later with <html data-theme="light|dark">.
   ===================================================================== */

@font-face{font-family:'Nunito';src:url('nunito.woff2') format('woff2');font-weight:200 1000;font-display:swap}

:root {
  color-scheme: light dark;

  --font-display: 'Nunito', system-ui, sans-serif;
  --font: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* ---------- LIGHT ---------- */
  --bg: #ffffff;
  --bg-soft: #f3faf7;
  --surface: #ffffff;
  --surface-2: #f1f7f4;
  --surface-3: #dfeee7;

  --text: #0b1f1a;
  --text-2: #3a5249;
  --text-3: #587068;

  --line: rgba(11, 31, 26, .12);
  --line-strong: rgba(11, 31, 26, .26);

  --brand: #25d6a0;
  --brand-hover: #14c18b;
  --on-brand: #03271c;
  --accent: #077656;
  --accent-hover: #066649;
  --on-accent: #ffffff;
  --accent-soft: rgba(8, 127, 94, .09);
  --accent-line: rgba(8, 127, 94, .32);
  --accent-bright: #19c394;
  --glow: rgba(37, 214, 160, .2);

  --tint-mint: #d9f6ea;
  --tint-sky: #dcecff;
  --tint-butter: #fff0bf;
  --tint-lilac: #e8e2ff;
  --tint-rose: #ffe1dc;
  --ink-band: #0b3a31;

  --info: #2563eb;
  --warning: #a8590a;
  --danger: #c62828;
  --purple: #7c3aed;
  --success: #087f5e;

  --overlay: rgba(11, 31, 26, .55);
  --shadow-sm: 0 1px 2px rgba(11, 31, 26, .06);
  --shadow-md: 0 10px 28px -14px rgba(11, 31, 26, .25);
  --shadow-lg: 0 28px 60px -26px rgba(11, 31, 26, .35);

  --band: #0b3a31;
  --band-text: #ffffff;
  --sh: .35;
}

/* Nunito everywhere, including form controls and headings */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6 { font-family: var(--font); }

/* ---------- DARK ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #09130f;
    --bg-soft: #0d1b16;
    --surface: #12211b;
    --surface-2: #19302a;
    --surface-3: #214036;

    --text: #e9f5ef;
    --text-2: #aac3b8;
    --text-3: #7f9b8f;

    --line: rgba(255, 255, 255, .1);
    --line-strong: rgba(255, 255, 255, .22);

    --brand: #3fe0ab;
    --brand-hover: #66ebc0;
    --on-brand: #03271c;
    --accent: #3fe0ab;
    --accent-hover: #66ebc0;
    --on-accent: #03271c;
    --accent-soft: rgba(63, 224, 171, .13);
    --accent-line: rgba(63, 224, 171, .36);
    --accent-bright: #3fe0ab;
    --glow: rgba(63, 224, 171, .2);

    --tint-mint: #123a2f;
    --tint-sky: #13304a;
    --tint-butter: #3d3414;
    --tint-lilac: #2a2650;
    --tint-rose: #402322;
    --ink-band: #0e4a3d;

    --info: #60a5fa;
    --warning: #fbbf24;
    --danger: #f87171;
    --purple: #a78bfa;
    --success: #3fe0ab;

    --overlay: rgba(0, 0, 0, .7);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px -10px rgba(0, 0, 0, .55);
    --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, .75);

    --band: #0e4a3d;
    --band-text: #ffffff;
    --sh: 1;
  }
}

:root[data-theme="dark"] {
  --bg: #09130f;
  --bg-soft: #0d1b16;
  --surface: #12211b;
  --surface-2: #19302a;
  --surface-3: #214036;

  --text: #e9f5ef;
  --text-2: #aac3b8;
  --text-3: #7f9b8f;

  --line: rgba(255, 255, 255, .1);
  --line-strong: rgba(255, 255, 255, .22);

  --brand: #3fe0ab;
  --brand-hover: #66ebc0;
  --on-brand: #03271c;
  --accent: #3fe0ab;
  --accent-hover: #66ebc0;
  --on-accent: #03271c;
  --accent-soft: rgba(63, 224, 171, .13);
  --accent-line: rgba(63, 224, 171, .36);
  --accent-bright: #3fe0ab;
  --glow: rgba(63, 224, 171, .2);

  --tint-mint: #123a2f;
  --tint-sky: #13304a;
  --tint-butter: #3d3414;
  --tint-lilac: #2a2650;
  --tint-rose: #402322;
  --ink-band: #0e4a3d;

  --info: #60a5fa;
  --warning: #fbbf24;
  --danger: #f87171;
  --purple: #a78bfa;
  --success: #3fe0ab;

  --overlay: rgba(0, 0, 0, .7);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 8px 24px -10px rgba(0, 0, 0, .55);
  --shadow-lg: 0 30px 70px -28px rgba(0, 0, 0, .75);

  --band: #0e4a3d;
  --band-text: #ffffff;
  --sh: 1;
}

/* ---------- names the dashboard already uses, mapped onto the tokens ---------- */
:root {
  --primary: var(--brand);
  --primary-dark: var(--brand-hover);
  --accent-dim: var(--accent-soft);
  --dark: var(--text);
  --panel: var(--surface);
  --gray: var(--text-2);
  --gray-light: var(--line);
  --gray-lighter: var(--surface-2);
  --surface2: var(--surface-2);
  --surface3: var(--surface-3);
  --border2: var(--line-strong);
  --white: var(--surface);
  --green-deep: var(--accent);
  --danger-dim: color-mix(in srgb, var(--danger) 12%, transparent);
  --warning-dim: color-mix(in srgb, var(--warning) 14%, transparent);
  --info-dim: color-mix(in srgb, var(--info) 12%, transparent);
  --green: var(--accent);
  --green-dim: var(--accent-soft);
  --muted: var(--text-2);
  --faint: var(--text-3);
  --border: var(--line);
}

/* ---------- logo swap: white logo on dark, dark logo on light ---------- */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .only-light { display: none !important; }
  :root:not([data-theme="light"]) .only-dark { display: revert !important; }
}
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: revert !important; }