/* ========================================================================
   PRINCIPIA SYSTEM — Canonical design tokens  v1.1
   Source of truth: Digital Post.html  +  Digital Registry.html
   Version: 1.1 · April 2026
   v1.1 adds: jl-spin-slow keyframes (used by <Seal>)
   ======================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,300..700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ───── Brand color (canonical, ex Digital Post) ───── */
  --jl-navy:        #0A1F3D;
  --jl-navy-deep:   #061529;
  --jl-blue:        #1C4A8F;
  --jl-accent:      #3B7BC9;
  --jl-paper:       #F4F6FB;
  --jl-ink:         #0A1F3D;
  --jl-muted:       #5B6B85;

  /* ───── Surfaces & rules ───── */
  --jl-surface:     #FFFFFF;
  --jl-surface-2:   #F8FAFC;
  --jl-rule:        rgba(10,31,61,0.10);
  --jl-rule-strong: rgba(10,31,61,0.22);

  /* ───── Semantic ───── */
  --jl-success:     #1F7A4D;
  --jl-warn:        #B27114;
  --jl-danger:      #B83227;

  /* ───── Type families (canonical) ───── */
  --jl-display:     'Fraunces', 'Tiempos Headline', Georgia, serif;
  --jl-sans:        'Source Sans 3', system-ui, -apple-system, sans-serif;
  --jl-mono:        'JetBrains Mono', ui-monospace, monospace;

  /* ───── Type scale ───── */
  --jl-fs-mega:     130px;
  --jl-fs-display:   72px;
  --jl-fs-h1:        48px;
  --jl-fs-h2:        32px;
  --jl-fs-h3:        22px;
  --jl-fs-body:      18px;
  --jl-fs-body-s:    15px;
  --jl-fs-ui:        14px;
  --jl-fs-mono:      11px;
  --jl-fs-imprint:    9px;

  --jl-tracking-mono:    0.18em;
  --jl-tracking-tight:  -0.02em;

  /* ───── Spacing (8-point) ───── */
  --jl-s-1:   4px;  --jl-s-2:   8px;  --jl-s-3:  12px;  --jl-s-4:  16px;
  --jl-s-5:  24px;  --jl-s-6:  32px;  --jl-s-7:  48px;  --jl-s-8:  64px;
  --jl-s-9:  96px;  --jl-s-10:128px;

  /* ───── Radii ───── */
  --jl-radius-sm:  4px;
  --jl-radius:     8px;
  --jl-radius-md: 12px;
  --jl-radius-lg: 16px;
  --jl-radius-xl: 24px;

  /* ───── Shadows ───── */
  --jl-shadow-1: 0 1px 2px rgba(10,31,61,0.06), 0 4px 14px rgba(10,31,61,0.06);
  --jl-shadow-2: 0 8px 28px rgba(10,31,61,0.10);
  --jl-shadow-3: 0 24px 60px rgba(10,31,61,0.18);

  /* ───── Motion ───── */
  --jl-ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --jl-dur:       240ms;
  --jl-dur-slow:  420ms;
}

/* ───── Base reset ───── */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: var(--jl-sans);
  background: var(--jl-paper);
  color: var(--jl-ink);
  -webkit-font-smoothing: antialiased;
}

/* ───── Type utilities ───── */
.jl-display {
  font-family: var(--jl-display);
  font-weight: 400;
  letter-spacing: var(--jl-tracking-tight);
  line-height: 1.02;
  color: var(--jl-ink);
}
.jl-mono {
  font-family: var(--jl-mono);
  font-size: var(--jl-fs-mono);
  letter-spacing: var(--jl-tracking-mono);
  text-transform: uppercase;
  color: var(--jl-muted);
}
.jl-body { font-size: var(--jl-fs-body); line-height: 1.55; }
.jl-hairline { border-top: 1px solid var(--jl-rule); }

/* ───── Motion keyframes  (NEW v1.1) ───── */
@keyframes jl-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}