/* ==========================================================================
   Leadd – Design Tokens v1.0
   Single source for website, app and brand sheet.
   Fonts:
   Fonts are self-hosted: see fonts.css (static/fonts, SIL OFL 1.1).
   ========================================================================== */

:root {
  /* ---- Brand primitives ------------------------------------------------ */
  --ld-ink: #111110;
  --ld-paper: #F7F7F4;
  --ld-white: #FFFFFF;
  --ld-signal: #FF5A1F;

  /* Neutral scale (slightly warm) */
  --ld-n-0: #FFFFFF;
  --ld-n-50: #FBFBF9;
  --ld-n-100: #F7F7F4;
  --ld-n-150: #EFEEEA;
  --ld-n-200: #E4E3DE;
  --ld-n-300: #D7D6CF;
  --ld-n-400: #A3A29B;
  --ld-n-500: #8A8982;
  --ld-n-600: #6B6A63;
  --ld-n-700: #56554F;
  --ld-n-800: #2E2E2B;
  --ld-n-850: #242421;
  --ld-n-900: #1B1B19;
  --ld-n-950: #111110;

  /* Heat ramp – signal strength, from cold to hot */
  --ld-heat-0: #E4E3DE;
  --ld-heat-1: #FFD9C7;
  --ld-heat-2: #FFB08A;
  --ld-heat-3: #FF8552;
  --ld-heat-4: #FF5A1F;

  /* ---- Roles: light (default) ----------------------------------------- */
  --bg: var(--ld-paper);
  --surface: var(--ld-white);
  --surface-2: var(--ld-n-150);       /* hover, subtle fills */
  --surface-sunken: #F2F2EE;          /* wells inside surfaces */
  --surface-inverse: var(--ld-ink);

  --text: var(--ld-ink);              /* 17.6:1 on paper */
  --text-2: var(--ld-n-700);          /*  7.0:1 on paper */
  --text-3: var(--ld-n-600);          /*  5.1:1 on paper – smallest allowed text tone */
  --text-inverse: #F2F1EC;

  --line: var(--ld-n-200);            /* decorative dividers only */
  --line-strong: var(--ld-n-300);
  --field: #8A8982;                   /* input boundaries, 3.3:1 on paper */

  --signal: var(--ld-signal);         /* graphic use: dot, meter, highlight */
  --signal-text: #B83A0B;             /* signal-coloured text, 5.4:1 on paper */
  --signal-soft: #FFF1EA;

  --action: var(--ld-ink);            /* primary action = ink, never signal */
  --action-hover: var(--ld-n-800);
  --action-text: var(--ld-white);

  --focus: var(--ld-ink);

  --success: #1E7A4C;
  --success-soft: #E7F2EC;
  --warning: #A35F00;
  --warning-soft: #FBF0DC;
  --danger: #C8102E;
  --danger-soft: #FCE8EB;

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display-xl: clamp(3rem, 1.4rem + 5.4vw, 6.25rem);   /* 48 → 100 */
  --t-display-l: clamp(2.25rem, 1.35rem + 3.1vw, 4rem);   /* 36 → 64 */
  --t-display-m: clamp(1.75rem, 1.3rem + 1.5vw, 2.5rem);  /* 28 → 40 */
  --t-title: 1.375rem;   /* 22 */
  --t-body-l: 1.1875rem; /* 19 */
  --t-body: 1rem;        /* 16 */
  --t-ui: 0.875rem;      /* 14 */
  --t-small: 0.8125rem;  /* 13 */
  --t-mono: 0.75rem;     /* 12 */

  --lh-display-xl: 0.98;
  --lh-display-l: 1.04;
  --lh-display-m: 1.1;
  --lh-title: 1.25;
  --lh-body: 1.55;
  --lh-ui: 1.43;

  --tr-display-xl: -0.045em;
  --tr-display-l: -0.035em;
  --tr-display-m: -0.025em;
  --tr-title: -0.012em;
  --tr-mono: 0.01em;

  --w-regular: 400;
  --w-medium: 500;
  --w-strong: 560;
  --w-bold: 650;

  /* ---- Space (4 px base) ---------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  /* ---- Radius ---------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(17 17 16 / 0.06);
  --shadow-2: 0 1px 2px rgb(17 17 16 / 0.04), 0 16px 40px -18px rgb(17 17 16 / 0.22);
  --shadow-3: 0 2px 4px rgb(17 17 16 / 0.06), 0 32px 72px -24px rgb(17 17 16 / 0.32);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;

  color-scheme: light;
}

/* ---- Roles: dark --------------------------------------------------------- */
[data-theme="dark"] {
  --bg: var(--ld-n-950);
  --surface: var(--ld-n-900);
  --surface-2: var(--ld-n-850);
  --surface-sunken: #161614;
  --surface-inverse: var(--ld-paper);

  --text: #F2F1EC;                    /* 16.7:1 on ink */
  --text-2: #A3A29B;                  /*  7.4:1 */
  --text-3: #8C8B84;                  /*  5.5:1 */
  --text-inverse: var(--ld-ink);

  --line: #2A2A27;
  --line-strong: #3A3A36;
  --field: #6B6A63;

  --signal-text: #FF7A45;
  --signal-soft: #2A1A12;

  --action: #F2F1EC;
  --action-hover: #FFFFFF;
  --action-text: var(--ld-ink);

  --focus: #F2F1EC;

  --success: #5CC28F;
  --success-soft: #142219;
  --warning: #E0A43A;
  --warning-soft: #261D0E;
  --danger: #FF6B7F;
  --danger-soft: #2A1216;

  --ld-heat-0: #3A3A36;

  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-2: 0 1px 2px rgb(0 0 0 / 0.4), 0 16px 40px -18px rgb(0 0 0 / 0.6);
  --shadow-3: 0 2px 4px rgb(0 0 0 / 0.4), 0 32px 72px -24px rgb(0 0 0 / 0.7);

  color-scheme: dark;
}

/* ---- Shared primitives ---------------------------------------------------- */

/* Signal marker – the final "d" of the logo, reduced for UI.
   .mark            ring + signal dot   = new signal
   .mark.is-seen    ring + ink dot      = seen signal
   .mark.is-watch   ring only           = account under watch */
.mark {
  --mark-size: 14px;
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--mark-size);
  height: var(--mark-size);
  border: 1.75px solid currentColor;
  border-radius: 50%;
  color: var(--text);
}
.mark::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36%;
  height: 36%;
  border-radius: 50%;
  background: var(--signal);
}
.mark.is-seen::after { background: currentColor; }
.mark.is-watch::after { display: none; }
.mark--lg { --mark-size: 20px; border-width: 2px; }

/* Score meter – five dots, coloured by heat level */
.meter { display: inline-flex; gap: 3px; vertical-align: middle; }
.meter i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ld-heat-0);
}
.meter[data-heat="1"] i.on { background: var(--ld-heat-1); }
.meter[data-heat="2"] i.on { background: var(--ld-heat-2); }
.meter[data-heat="3"] i.on { background: var(--ld-heat-3); }
.meter[data-heat="4"] i.on { background: var(--ld-heat-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}