/* wwwroot/css/theme.css — dossier tokens */

/* Self-hosted fonts (served from /fonts, no Google Fonts dependency — privacy-first: the
   browser never contacts fonts.googleapis.com / fonts.gstatic.com). Mona Sans & JetBrains Mono
   are OFL-licensed; sourced from their official GitHub releases. font-display: swap keeps text
   visible during load. */
@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/mona-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/mona-sans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/mona-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Mona Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/fonts/mona-sans-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Mona Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/mona-sans-italic-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
}

:root {
  /* Light theme (cream) — applies always; .dark overrides below */
  --background: #faf8f3;
  --foreground: #1c1917;
  --card: #ffffff;
  --card-foreground: #1c1917;
  --muted: #f3efe6;
  --muted-foreground: #5c544a;
  --border: #e8e2d4;
  --input: #e8e2d4;
  --accent: #9a1a2e;             /* deep wine on light */
  --accent-foreground: #ffffff;
  --primary: var(--accent);
  --primary-foreground: var(--accent-foreground);
  --secondary: #f3efe6;
  --secondary-foreground: #1c1917;
  --destructive: #6e0f1f;
  --destructive-foreground: #ffffff;
  --success: #1f7a4d;
  --success-foreground: #ffffff;
  --warning: #b45309;
  --popover: #ffffff;
  --popover-foreground: #1c1917;
  --ring: var(--accent);
  --radius: 0.625rem;

  /* Dossier-specific additions */
  --ink-faint: #9a907d;
  --surface-up: #f3efe6;
  --surface-tint: rgba(28, 25, 23, 0.025);
  --nav-bg: rgba(250, 248, 243, 0.78);
  --accent-soft: rgba(154, 26, 46, 0.08);

  --font-sans: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Mona Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --shadow-card: 0 16px 40px -22px rgba(28, 25, 23, 0.18);
  --shadow-cta: 0 6px 16px -6px rgba(154, 26, 46, 0.45);
  --shadow-mockup: 0 0 0 1px var(--border), 0 18px 40px -16px rgba(28, 25, 23, 0.14);

  /* Terminal surface for protocol/wire content (SMTP transcript, send-test
     snippets). Light mode: warm muted surface with dark ink. Dark mode below
     pushes it above the page background so the boundary stays visible. */
  --terminal-surface:          #f3efe6;
  --terminal-border:           #e8e2d4;
  --terminal-text:             #3d3830;
  --terminal-text-bright:      #1c1917;
  --terminal-text-dim:         #9a907d;
  --terminal-text-timestamp:   #b5a890;
  --terminal-text-data:        #6e6657;
}

.dark {
  --background: #15130f;
  --foreground: #f5f0e6;
  --card: #1f1c17;
  --card-foreground: #f5f0e6;
  --muted: #2a2620;
  --muted-foreground: #b5ad9e;
  --border: #34302a;
  --input: #34302a;
  --accent: #f87171;             /* coral — warm dossier accent */
  --accent-foreground: #15130f;
  --secondary: #2a2620;
  --secondary-foreground: #f5f0e6;
  --destructive: #b91c1c;
  --destructive-foreground: #f5f0e6;
  --success: #6bbf8a;
  --success-foreground: #15130f;
  --warning: #e0a020;
  --popover: #1f1c17;
  --popover-foreground: #f5f0e6;

  --ink-faint: #6e6657;
  --surface-up: #2a2620;
  --surface-tint: rgba(245, 240, 230, 0.025);
  --nav-bg: rgba(21, 19, 15, 0.78);
  --accent-soft: rgba(248, 113, 113, 0.14);

  --shadow-card: 0 16px 48px -22px rgba(0, 0, 0, 0.7);
  --shadow-cta: 0 6px 18px -6px rgba(248, 113, 113, 0.55);
  --shadow-mockup: 0 0 0 1px var(--border), 0 18px 48px -16px rgba(0, 0, 0, 0.55);

  /* Page bg is #15130f in dark — push terminal surface up to #1f1c17 so the
     block doesn't disappear into the page. */
  --terminal-surface:          #1f1c17;
  --terminal-border:           #34302a;
  --terminal-text:             #b5ad9e;
  --terminal-text-bright:      #f5f0e6;
  --terminal-text-dim:         #6e6657;
  --terminal-text-timestamp:   #5c544a;
  --terminal-text-data:        #8b8273;
}

/* Persistent jump-target highlight, applied by js/scroll-highlight.js when a verdict /
   score card sub-point is clicked. A soft accent ring + gentle glow follows the card's own
   radius (no hard outline/offset). On arrival it blinks twice to grab the eye, then settles
   into a calm steady ring that STAYS until the next outside click — the steady state is the
   base box-shadow below, so the element holds it after the animation ends. Theme tokens keep
   it legible in both light and dark; scroll-margin gives breathing room when centred. */
.mc-jump-highlight {
  position: relative;
  z-index: 1;
  background-color: color-mix(in oklab, var(--accent) 5%, transparent);
  box-shadow:
    0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent),
    0 12px 32px -12px color-mix(in oklab, var(--accent) 45%, transparent);
  transition: box-shadow 0.4s ease, background-color 0.4s ease;
  animation: mc-jump-flash 1.2s ease-in-out;
  scroll-margin: 20vh 0;
}

/* Two unmistakable blinks: a strong ring + glow snaps ON at 0/32/64%, drops fully OFF at
   16/48% (transparent, zero spread), then eases from the last ON peak onto the steady ring
   (the 100% stop equals the base box-shadow, so there is no jump when the animation ends).
   Three evenly-spaced ON peaks with OFF gaps between read as two distinct blinks; the full
   transparent OFF beats are what make it a blink rather than a gentle pulse. */
@keyframes mc-jump-flash {
  0%, 32%, 64% {
    box-shadow:
      0 0 0 5px color-mix(in oklab, var(--accent) 45%, transparent),
      0 0 26px 4px color-mix(in oklab, var(--accent) 55%, transparent);
  }
  16%, 48% {
    box-shadow: 0 0 0 0 transparent;
  }
  100% {
    box-shadow:
      0 0 0 1.5px color-mix(in oklab, var(--accent) 55%, transparent),
      0 12px 32px -12px color-mix(in oklab, var(--accent) 45%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mc-jump-highlight {
    animation: none;
    transition: none;
  }
}