/* ============================================================
   Mjolnir Security — design tokens
   Source of truth: the "Mjolnir Security" Design System.
   Fonts (IBM Plex Sans / Mono) are linked from the page <head>.
   Apply .mj-dark (screens) or .mj-light (print) on a wrapper.
   ============================================================ */

:root{
  /* families */
  --mj-font-sans:'IBM Plex Sans', system-ui, sans-serif;
  --mj-font-mono:'IBM Plex Mono', ui-monospace, monospace;

  /* blues — the whole brand lives here */
  --mj-ink-deck:#0A1424;        /* deck canvas */
  --mj-ink-cover:#091221;       /* cover canvas, one step deeper */
  --mj-navy:#13284a;
  --mj-navy-deep:#0E1E38;
  --mj-navy-print:#1B365D;
  --mj-deep:#003F7F;            /* deepest usable blue, both themes */
  --mj-blue:#1E7FD0;            /* primary on dark */
  --mj-blue-print:#0070C0;      /* primary on light */
  --mj-sky:#5BA8E0;             /* accent word, kickers on dark */
  --mj-sky-print:#5B9BD5;
  --mj-sky-light:#8FC5EE;

  /* neutrals */
  --mj-white:#ffffff;
  --mj-paper:#EAF1F9;
  --mj-body-dark:#D4E2F1;
  --mj-muted:#9DB4CE;
  --mj-muted-2:#6E8AAC;
  --mj-ink-print:#0F1F35;
  --mj-body-print:#1F2937;
  --mj-gray:#4B5563;
  --mj-gray-2:#6B7685;
  --mj-tint:#EFF6FB;
  --mj-tint-2:#F4F7FA;

  /* hairlines & fills */
  --mj-line-dark:rgba(120,160,210,.20);
  --mj-line-dark-2:rgba(120,160,210,.34);
  --mj-card-dark:rgba(36,64,104,.30);
  --mj-card-dark-2:rgba(46,80,128,.42);
  --mj-line-print:#D8E0EA;
  --mj-line-print-soft:#E7ECF2;

  /* signal — sparingly, only for genuine status */
  --mj-good:#46C28E;
  --mj-warn:#E0A23A;
  --mj-alert:#E0573A;

  /* weights */
  --mj-weight-light:300;
  --mj-weight-regular:400;
  --mj-weight-medium:500;
  --mj-weight-semibold:600;

  /* tracking */
  --mj-track-title:-.02em;
  --mj-track-label:.14em;
  --mj-track-label-wide:.24em;
  --mj-track-kicker:.34em;

  /* leading */
  --mj-leading-title:1.02;
  --mj-leading-lede:1.32;
  --mj-leading-body:1.5;
  --mj-leading-tight:1.15;

  /* spacing */
  --mj-space-1:4px;
  --mj-space-2:8px;
  --mj-space-3:13px;
  --mj-space-4:18px;
  --mj-space-5:24px;
  --mj-space-6:30px;
  --mj-space-7:46px;
  --mj-space-8:70px;

  /* radii */
  --mj-radius-sm:5px;
  --mj-radius:9px;
  --mj-radius-md:13px;
  --mj-radius-lg:16px;
  --mj-radius-xl:18px;
  --mj-radius-pill:100px;

  /* rules */
  --mj-hairline:1px;
  --mj-accent-rule:2px;
  --mj-tier-rule:4px;

  /* canvas backgrounds — solid base MUST stay under the glows */
  --mj-bg-deck:
    radial-gradient(1200px 700px at 78% -12%, rgba(30,127,208,.16), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(0,63,127,.22), transparent 55%),
    linear-gradient(135deg,#0A1424 0%, #0E2038 55%, #0A1730 100%);
  --mj-bg-band:linear-gradient(105deg, var(--mj-ink-print) 0%, var(--mj-navy-print) 58%, var(--mj-deep) 130%);
  --mj-bg-cta:linear-gradient(115deg, var(--mj-ink-print) 0%, var(--mj-navy-print) 55%, var(--mj-deep) 120%);
  --mj-bg-feature:linear-gradient(160deg,rgba(30,127,208,.26),rgba(20,40,74,.5));

  --mj-watermark-opacity:.07;
  --mj-shadow-sheet:0 18px 50px rgba(0,0,0,.42);
  --mj-ease:cubic-bezier(.22,.61,.36,1);
  --mj-duration:180ms;
}

/* ── Dark theme (screens) ── */
.mj-dark{
  --mj-bg:var(--mj-ink-deck);
  --mj-surface:var(--mj-card-dark);
  --mj-surface-raised:var(--mj-card-dark-2);
  --mj-border:var(--mj-line-dark);
  --mj-border-strong:var(--mj-line-dark-2);
  --mj-primary:var(--mj-blue);
  --mj-accent:var(--mj-sky);
  --mj-accent-soft:var(--mj-sky-light);
  --mj-text-heading:var(--mj-white);
  --mj-text-body:var(--mj-body-dark);
  --mj-text-muted:var(--mj-muted);
  --mj-text-dim:var(--mj-muted-2);
  color-scheme:dark;
}

/* ── Light theme (print / PDF) ── */
.mj-light{
  --mj-bg:var(--mj-white);
  --mj-surface:var(--mj-tint);
  --mj-surface-raised:var(--mj-tint-2);
  --mj-border:var(--mj-line-print);
  --mj-border-strong:var(--mj-line-print-soft);
  --mj-primary:var(--mj-blue-print);
  --mj-accent:var(--mj-sky-print);
  --mj-accent-soft:var(--mj-deep);
  --mj-text-heading:var(--mj-ink-print);
  --mj-text-body:var(--mj-body-print);
  --mj-text-muted:var(--mj-gray);
  --mj-text-dim:var(--mj-gray-2);
  color-scheme:light;
}