/* ============================================================
   SigilPrint Design Tokens + Core Component Classes
   Direction B — "Document Lab / Sigil Seal"
   Drop-in target: src/SigilPrint.Console/wwwroot/css/app.css
   No external dependencies. Plain CSS custom properties.
   ============================================================ */

:root {
  /* ---- Color: paper & ink -------------------------------- */
  --sp-color-ink:        #14181F;
  --sp-color-ink-deep:   #0B1020;
  --sp-color-paper:      #FBFBFD;
  --sp-color-paper-warm: #F7F2E8;
  --sp-color-panel:      #FFFFFF;
  --sp-color-panel-alt:  #F2F5FA;
  --sp-color-rule:       #D9E0EA;
  --sp-color-rule-soft:  #E7ECF3;
  --sp-color-muted:      #5D6677;
  --sp-color-faint:      #8A93A5;

  /* ---- Color: action & brand ------------------------------ */
  --sp-color-action:       #2563EB;
  --sp-color-action-hover: #1D4FD7;
  --sp-color-action-soft:  #EAF0FE;
  --sp-color-sigil:        #4F46E5;
  --sp-color-sigil-soft:   #EDECFC;
  --sp-color-seal:         #6D5BD0;
  --sp-color-wax:          #8B2E45;
  --sp-color-wax-soft:     #F6ECEF;

  /* ---- Color: semantic ------------------------------------ */
  --sp-color-success:      #16A34A;
  --sp-color-success-ink:  #0F7A38;
  --sp-color-success-soft: #E9F7EE;
  --sp-color-warning:      #D97706;
  --sp-color-warning-ink:  #A05A05;
  --sp-color-warning-soft: #FCF3E5;
  --sp-color-danger:       #DC2626;
  --sp-color-danger-ink:   #B91C1C;
  --sp-color-danger-soft:  #FCECEC;
  --sp-color-info:         #0EA5A4;
  --sp-color-info-ink:     #0B807F;
  --sp-color-info-soft:    #E6F5F5;

  /* ---- Typography ----------------------------------------- */
  --sp-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sp-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sp-font-doc-serif: Georgia, "Times New Roman", serif;

  --sp-text-xs:   12px;
  --sp-text-sm:   13px;
  --sp-text-base: 14px;
  --sp-text-body: 16px;
  --sp-text-lg:   18px;
  --sp-text-xl:   22px;
  --sp-text-2xl:  28px;
  --sp-text-3xl:  36px;

  --sp-leading-tight:  1.25;
  --sp-leading-normal: 1.5;
  --sp-leading-loose:  1.65;

  --sp-weight-normal:   400;
  --sp-weight-medium:   500;
  --sp-weight-semibold: 600;
  --sp-weight-bold:     700;

  --sp-tracking-caps: 0.06em;

  /* ---- Spacing (4px base) ---------------------------------- */
  --sp-space-1: 4px;
  --sp-space-2: 8px;
  --sp-space-3: 12px;
  --sp-space-4: 16px;
  --sp-space-5: 20px;
  --sp-space-6: 24px;
  --sp-space-8: 32px;
  --sp-space-10: 40px;
  --sp-space-12: 48px;
  --sp-space-16: 64px;

  /* ---- Radius ---------------------------------------------- */
  --sp-radius-xs: 4px;
  --sp-radius-sm: 6px;
  --sp-radius-md: 10px;
  --sp-radius-lg: 14px;
  --sp-radius-pill: 999px;

  /* ---- Elevation ------------------------------------------- */
  --sp-shadow-panel: 0 1px 2px rgba(15, 23, 42, .08);
  --sp-shadow-raised: 0 2px 8px rgba(15, 23, 42, .10);
  --sp-shadow-overlay: 0 12px 32px rgba(11, 16, 32, .18);

  /* ---- Focus ------------------------------------------------ */
  --sp-focus-ring: 0 0 0 3px rgba(37, 99, 235, .28);
  --sp-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, .28);

  /* ---- Motion ------------------------------------------------ */
  --sp-ease: cubic-bezier(.2, .6, .3, 1);
  --sp-duration: 140ms;
}

/* ============================================================
   Base
   ============================================================ */

.sp-shell,
.sp-viewer-shell,
.sp-verify-shell {
  font-family: var(--sp-font-ui);
  color: var(--sp-color-ink);
  background: var(--sp-color-paper);
  font-size: var(--sp-text-base);
  line-height: var(--sp-leading-normal);
  -webkit-font-smoothing: antialiased;
}

.sp-shell :focus-visible,
.sp-viewer-shell :focus-visible,
.sp-verify-shell :focus-visible {
  outline: none;
  box-shadow: var(--sp-focus-ring);
  border-radius: var(--sp-radius-xs);
}

/* ============================================================
   App shell (console)
   ============================================================ */

.sp-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sp-sidebar {
  background: var(--sp-color-ink-deep);
  color: #C9D0DE;
  padding: var(--sp-space-4) var(--sp-space-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-space-1);
}

.sp-sidebar-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sp-radius-sm);
  color: #C9D0DE;
  text-decoration: none;
  font-size: var(--sp-text-base);
  min-height: 36px;
}

.sp-sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #FFFFFF; }

.sp-sidebar-link[aria-current="page"] {
  background: rgba(79, 70, 229, .28);
  color: #FFFFFF;
  font-weight: var(--sp-weight-medium);
}

.sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-4);
  padding: 0 var(--sp-space-6);
  height: 56px;
  background: var(--sp-color-panel);
  border-bottom: 1px solid var(--sp-color-rule);
}

@media (max-width: 900px) {
  .sp-shell { grid-template-columns: 1fr; }
}

/* ============================================================
   Card / panel
   ============================================================ */

.sp-card {
  background: var(--sp-color-panel);
  border: 1px solid var(--sp-color-rule);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-panel);
  padding: var(--sp-space-5);
}

.sp-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-space-3);
  margin-bottom: var(--sp-space-4);
}

.sp-card-title {
  font-size: var(--sp-text-body);
  font-weight: var(--sp-weight-semibold);
  margin: 0;
}

.sp-kicker {
  font-size: var(--sp-text-xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-color-muted);
}

/* ============================================================
   Buttons
   ============================================================ */

.sp-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border-radius: var(--sp-radius-sm);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--sp-text-base);
  font-weight: var(--sp-weight-medium);
  cursor: pointer;
  transition: background var(--sp-duration) var(--sp-ease),
              border-color var(--sp-duration) var(--sp-ease);
  text-decoration: none;
}

.sp-button:disabled { opacity: .5; cursor: not-allowed; }

.sp-button-primary { background: var(--sp-color-action); color: #FFFFFF; }
.sp-button-primary:hover:not(:disabled) { background: var(--sp-color-action-hover); }

.sp-button-secondary {
  background: var(--sp-color-panel);
  color: var(--sp-color-ink);
  border-color: var(--sp-color-rule);
}
.sp-button-secondary:hover:not(:disabled) { border-color: var(--sp-color-muted); }

.sp-button-ghost { background: transparent; color: var(--sp-color-action); }
.sp-button-ghost:hover:not(:disabled) { background: var(--sp-color-action-soft); }

.sp-button-danger { background: var(--sp-color-danger); color: #FFFFFF; }
.sp-button-danger:hover:not(:disabled) { background: var(--sp-color-danger-ink); }

.sp-button-lg { min-height: 48px; padding: 0 22px; font-size: var(--sp-text-body); }

/* ============================================================
   Status pills
   ============================================================ */

.sp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 1px 10px;
  border-radius: var(--sp-radius-pill);
  font-size: var(--sp-text-xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.sp-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.sp-pill-live      { background: var(--sp-color-success-soft); color: var(--sp-color-success-ink); border-color: #BFE6CD; }
.sp-pill-test      { background: var(--sp-color-warning-soft); color: var(--sp-color-warning-ink); border-color: #F0D9B0; }
.sp-pill-succeeded { background: var(--sp-color-success-soft); color: var(--sp-color-success-ink); border-color: #BFE6CD; }
.sp-pill-failed    { background: var(--sp-color-danger-soft);  color: var(--sp-color-danger-ink);  border-color: #F2C4C4; }
.sp-pill-pending   { background: var(--sp-color-panel-alt);    color: var(--sp-color-muted);       border-color: var(--sp-color-rule); }
.sp-pill-revoked   { background: var(--sp-color-danger-soft);  color: var(--sp-color-danger-ink);  border-color: #F2C4C4; }
.sp-pill-expired   { background: var(--sp-color-panel-alt);    color: var(--sp-color-muted);       border-color: var(--sp-color-rule); }
.sp-pill-purged    { background: var(--sp-color-panel-alt);    color: var(--sp-color-muted);       border-color: var(--sp-color-rule); }
.sp-pill-sealed    { background: var(--sp-color-sigil-soft);   color: var(--sp-color-sigil);       border-color: #CDC9F4; }

/* ============================================================
   Code blocks
   ============================================================ */

.sp-code-block {
  background: var(--sp-color-ink-deep);
  color: #DCE3EF;
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  line-height: 1.6;
  border-radius: var(--sp-radius-md);
  padding: var(--sp-space-4) var(--sp-space-5);
  overflow-x: auto;
  tab-size: 2;
}

.sp-code-inline {
  font-family: var(--sp-font-mono);
  font-size: 0.92em;
  background: var(--sp-color-panel-alt);
  border: 1px solid var(--sp-color-rule-soft);
  border-radius: var(--sp-radius-xs);
  padding: 1px 5px;
}

/* ============================================================
   Fingerprint / hash display
   ============================================================ */

.sp-fingerprint {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-2xl);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: 0.12em;
  color: var(--sp-color-ink);
}

.sp-fingerprint-full {
  font-family: var(--sp-font-mono);
  font-size: var(--sp-text-sm);
  word-break: break-all;
  color: var(--sp-color-muted);
}

/* ============================================================
   Seal / evidence panels
   ============================================================ */

.sp-seal-card {
  background: var(--sp-color-panel);
  border: 1px solid var(--sp-color-rule);
  border-top: 3px solid var(--sp-color-wax);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-panel);
  padding: var(--sp-space-5);
}

.sp-evidence-card {
  background: var(--sp-color-panel);
  border: 1px solid var(--sp-color-rule);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-panel);
  padding: var(--sp-space-5);
}

.sp-evidence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-space-3);
  padding: 10px 0;
  border-bottom: 1px solid var(--sp-color-rule-soft);
  font-size: var(--sp-text-base);
}

.sp-evidence-row:last-child { border-bottom: none; }

/* ============================================================
   Tables
   ============================================================ */

.sp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sp-text-base);
}

.sp-table th {
  text-align: left;
  font-size: var(--sp-text-xs);
  font-weight: var(--sp-weight-semibold);
  letter-spacing: var(--sp-tracking-caps);
  text-transform: uppercase;
  color: var(--sp-color-muted);
  padding: 8px 12px;
  border-bottom: 1px solid var(--sp-color-rule);
}

.sp-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sp-color-rule-soft);
  vertical-align: middle;
}

.sp-table tr:hover td { background: var(--sp-color-panel-alt); }

/* ============================================================
   Banners / toasts
   ============================================================ */

.sp-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-space-3);
  padding: var(--sp-space-3) var(--sp-space-4);
  border-radius: var(--sp-radius-sm);
  border: 1px solid var(--sp-color-rule);
  background: var(--sp-color-panel-alt);
  font-size: var(--sp-text-base);
}

.sp-banner-warning { background: var(--sp-color-warning-soft); border-color: #F0D9B0; }
.sp-banner-danger  { background: var(--sp-color-danger-soft);  border-color: #F2C4C4; }
.sp-banner-success { background: var(--sp-color-success-soft); border-color: #BFE6CD; }
.sp-banner-info    { background: var(--sp-color-info-soft);    border-color: #BCE2E2; }

/* ============================================================
   Public viewer shell
   ============================================================ */

.sp-viewer-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-space-6) var(--sp-space-4) var(--sp-space-16);
  font-size: var(--sp-text-body);
}

.sp-viewer-doc {
  background: var(--sp-color-panel);
  border: 1px solid var(--sp-color-rule);
  border-radius: var(--sp-radius-md);
  box-shadow: var(--sp-shadow-panel);
  padding: var(--sp-space-8);
}

/* ============================================================
   Verify shell
   ============================================================ */

.sp-verify-shell {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--sp-space-8) var(--sp-space-4) var(--sp-space-16);
  font-size: var(--sp-text-body);
}

/* ============================================================
   Document template root (rendered PDFs)
   ============================================================ */

.sp-document-template {
  font-family: var(--sp-font-ui);
  color: var(--sp-color-ink);
  background: #FFFFFF;
  font-size: 12pt;
  line-height: 1.5;
}

.sp-document-template.sp-doc-serif { font-family: var(--sp-font-doc-serif); }

.sp-test-watermark { position: relative; }

.sp-test-watermark::after {
  content: "TEST";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120pt;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(217, 119, 6, .10);
  transform: rotate(-28deg);
  pointer-events: none;
}

/* ============================================================
   Accessibility: forced colors + reduced motion
   ============================================================ */

@media (forced-colors: active) {
  .sp-status-pill, .sp-button, .sp-card, .sp-seal-card { border: 1px solid CanvasText; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-shell *, .sp-viewer-shell *, .sp-verify-shell * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}