/* ============================================================
   Elementum 2.0 — self-contained design-system CSS for TruthlyPro
   Pulled from the user's Claude Design project "Elementum 2.0 Design System"
   (project 4f98b03a) on 2026-06-22. Token values are verbatim; assembled into
   one offline file (Poppins + UIcons via CDN). Source of truth = claude.ai/design.
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@400;700&display=swap");
@import url("https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css");
@import url("https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css");

:root{
  /* Brand */
  --primary-25:#f8f5ff;--primary-50:#f2edff;--primary-100:#e4daff;--primary-200:#cab4ff;--primary-300:#af8fff;--primary-400:#9569ff;--primary-500:#7a44ff;--primary-600:#6236cc;--primary-700:#492999;--primary-800:#301c66;--primary-900:#180e33;
  --secondary-500:#9a4aff;--secondary-600:#7b24e8;
  --tertiary-500:#3994ff;--tertiary-600:#1873de;
  /* Feedback */
  --negative-50:#fff1f0;--negative-500:#ff554a;--negative-600:#ea483d;
  --positive-50:#e9faf0;--positive-500:#23c965;--positive-600:#08b94e;--positive-700:#02983e;
  --warning-50:#fff9ed;--warning-500:#ffc14a;--warning-600:#eba622;
  /* Neutrals */
  --gray-25:#fafafa;--gray-50:#f0f1f3;--gray-100:#e0e2e7;--gray-200:#c2c6ce;--gray-300:#a3a9b6;--gray-400:#858d9d;--gray-500:#667085;--gray-600:#59647a;--gray-700:#525d73;--gray-800:#4a556c;--gray-900:#404a60;
  --ink-25:#bcc3e3;--ink-100:#8791b7;--ink-300:#475175;--ink-500:#2f3757;--ink-600:#242a46;--ink-700:#1b2037;--ink-800:#151a2d;--ink-900:#0e1223;
  --white:#fff;--black:#000;
  /* Semantic (light) */
  --text-display:var(--ink-900);--text-heading:var(--ink-900);--text-body:var(--ink-900);--text-soft:var(--gray-500);--text-light:var(--white);--text-link:var(--primary-500);
  --surface-page:var(--gray-25);--surface-card:var(--white);--surface-sunken:var(--gray-50);--surface-inverse:var(--ink-800);
  --border-subtle:var(--gray-50);--border-default:var(--gray-100);--border-strong:var(--gray-200);
  --fill-primary:var(--primary-500);--hover-primary:var(--primary-600);
  /* Brand gradient */
  --brand-gradient:linear-gradient(135deg,var(--primary-500) 0%,var(--secondary-500) 52%,var(--tertiary-500) 100%);
  /* Type */
  --font-display:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-body:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;--font-accent:"Inter","Poppins",sans-serif;
  --weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;
  --text-xs:14px;--text-sm:16px;--text-md:18px;--text-lg:20px;--text-2xl:36px;--text-3xl:48px;--text-4xl:64px;--text-5xl:72px;--text-6xl:96px;
  --leading-xs:20px;--leading-sm:24px;--leading-md:28px;--leading-lg:34px;--leading-2xl:52px;--leading-4xl:84px;
  /* Spacing / radius / stroke */
  --space-2:4px;--space-4:8px;--space-6:12px;--space-8:16px;--space-10:20px;--space-12:24px;--space-16:32px;--space-20:40px;--space-24:48px;--space-32:64px;
  --radius-sm-4x:8px;--radius-md:12px;--radius-md-2x:16px;--radius-lg-2x:24px;--radius-full:9999px;
  --stroke-sm:1px;--stroke-md:1.5px;
  /* Effects */
  --shadow-sm:0 4px 6px 0 rgba(0,0,0,.08);--shadow-md:0 8px 12px 0 rgba(0,0,0,.07);--shadow-lg:0 16px 18px 0 rgba(0,0,0,.06);--shadow-xl:0 32px 40px 0 rgba(0,0,0,.06);
  --ring-primary:0 0 0 4px rgba(122,68,255,.18);--ring-negative:0 0 0 4px rgba(255,85,74,.18);
  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1);--dur-fast:120ms;--dur:180ms;--dur-slow:280ms;
  --icon-size-sm:16px;--icon-size-md:20px;--icon-size-lg:24px;
}
:root[data-theme="dark"],.dark{
  --text-display:var(--white);--text-heading:var(--white);--text-body:var(--white);--text-soft:var(--ink-100);
  --surface-page:var(--ink-900);--surface-card:var(--ink-800);--surface-sunken:var(--ink-900);
  --border-subtle:var(--ink-600);--border-default:var(--ink-600);--border-strong:var(--ink-500);
}

/* ---- Ready-made type classes ---- */
.es-display-xl{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-6xl);line-height:108px;color:var(--text-display);letter-spacing:-.02em}
.es-display-lg{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-5xl);line-height:84px;color:var(--text-display);letter-spacing:-.02em}
.es-display-md{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-4xl);line-height:var(--leading-4xl);color:var(--text-display);letter-spacing:-.02em}
.es-display-sm{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-3xl);line-height:var(--leading-2xl);color:var(--text-display);letter-spacing:-.01em}
.es-heading{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-2xl);line-height:var(--leading-2xl);color:var(--text-heading)}
.es-lead{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-lg);line-height:var(--leading-lg);color:var(--text-body)}
.es-body-lg{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-md);line-height:var(--leading-md);color:var(--text-body)}
.es-body{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--text-body)}
.es-caption{font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--text-soft)}

/* ---- Component patterns (replicated from Elementum core for static use) ---- */
*{box-sizing:border-box}
.es-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:var(--weight-semibold);font-size:var(--text-sm);border:0;border-radius:var(--radius-sm-4x);cursor:pointer;transition:background var(--dur) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);min-height:48px;padding:0 20px;color:var(--white);background:var(--fill-primary)}
.es-btn:hover{background:var(--hover-primary)}
.es-btn:active{transform:scale(.985)}
.es-btn--lg{min-height:52px;padding:0 24px;font-size:var(--text-md)}
.es-btn--block{width:100%}
.es-btn--soft{background:var(--primary-50);color:var(--primary-700)}.es-btn--soft:hover{background:var(--primary-100)}
.es-btn--outline{background:transparent;color:var(--primary-600);border:var(--stroke-md) solid var(--primary-200)}.es-btn--outline:hover{background:var(--primary-25)}
.es-field{display:flex;flex-direction:column;gap:6px}
.es-label{font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-xs);color:var(--text-body)}
.es-input,.es-select,.es-textarea{width:100%;min-height:48px;padding:0 14px;border:var(--stroke-md) solid var(--border-strong);border-radius:var(--radius-sm-4x);background:var(--surface-card);color:var(--text-body);font:var(--weight-regular) var(--text-sm)/1.4 var(--font-body)}
.es-textarea{min-height:104px;padding:12px 14px;resize:vertical}
.es-input:focus,.es-select:focus,.es-textarea:focus{outline:0;border-color:var(--primary-500);box-shadow:var(--ring-primary)}
.es-input::placeholder,.es-textarea::placeholder{color:var(--gray-400)}
.es-card{background:var(--surface-card);border:var(--stroke-sm) solid var(--border-default);border-radius:var(--radius-md-2x);box-shadow:var(--shadow-lg);padding:var(--space-12)}
.es-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:var(--radius-full);background:var(--surface-card);border:var(--stroke-sm) solid var(--border-default);font:var(--weight-medium) var(--text-xs)/1 var(--font-body);color:var(--ink-700)}
.es-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:var(--radius-full);font:var(--weight-semibold) 12px/1 var(--font-body)}
.es-badge--positive{background:var(--positive-50);color:var(--positive-700)}
.es-consent{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;padding:14px;border:var(--stroke-sm) solid var(--warning-500);background:var(--warning-50);border-radius:var(--radius-md);font:var(--weight-medium) var(--text-xs)/1.5 var(--font-body);color:var(--ink-700)}
.es-step{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start}
.es-step .es-dot{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--radius-full);background:var(--primary-50);color:var(--primary-700);font-weight:var(--weight-semibold)}