/*
 This CSS file is used to override the existing styles of the theme.
 You can change the article headings, fonts, colors, etc.

 Security Sonar coral theme — light mode only, regardless of the visitor's
 OS/browser color-scheme preference. cream background, coral sonar mark,
 dark warm text.

 This file is loaded after the theme's compiled Tailwind stylesheet and is
 not itself run through Tailwind, so its plain (unlayered) rules always win
 the cascade over the theme's `@layer utilities` classes, regardless of
 source order. That lets us safely re-point the theme's existing utility
 classes (bg-white, text-tlgray-800, etc.) at the coral palette below
 without touching the theme submodule.
*/

:root {
  color-scheme: light;
  --ss-bg: #F0EEE6;
  --ss-text: #1F1E1D;
  --ss-text-secondary: #44423C;
  --ss-text-muted: #8A8778;
  --ss-border: #E4E1D6;
  --ss-coral: #D97757;
  --ss-coral-dark: #C25F3E;
  --ss-dark: #1F1E1D;
  --ss-on-dark: #F0EEE6;
}

body {
  background-color: var(--ss-bg);
  color: var(--ss-text-secondary);
  font-family: 'Space Grotesk', sans-serif;
}

.content {
  font-family: 'Space Grotesk', sans-serif;
}

/* Page / card surfaces */
.bg-white {
  background-color: var(--ss-bg);
}
.bg-gray-100,
.bg-gray-200 {
  background-color: var(--ss-border);
}
.bg-tlgray-200 {
  background-color: var(--ss-border);
}

/* Dark surfaces: hero band, mobile nav overlay, primary buttons */
.bg-tlgray-800,
.bg-black,
.bg-gray-800 {
  background-color: var(--ss-dark);
}

/* Home hero band: dark surface overlaid with concentric coral "sonar"
   rings radiating from the middle of the right edge.

   `background-size: auto 100%` locks the image height to the band height
   and `background-position: right center` pins its right-center point —
   where the rings originate — to the band's right-center at every
   viewport size and aspect ratio (desktop, portrait phone, tall band).
   The SVG carries its own dark fill; bg-tlgray-800 above stays as the
   load/fallback colour and fills any sliver left of the artwork on
   ultra-wide viewports, where only the faintest outer rings would sit. */
.hero-sonar {
  background-image: url("/img/hero-sonar.svg");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: auto 100%;
}
.bg-black\/90 {
  background-color: color-mix(in oklab, var(--ss-dark) 90%, transparent);
}
.hover\:bg-gray-800:hover {
  background-color: var(--ss-dark);
}

/* Header and footer: always cream, matching the logo background.
   Scoped to the header/footer elements specifically since bg-gray-800 and
   bg-tlgray-800 above are shared with buttons and the hero band, which
   should stay dark. */
header,
footer.bg-tlgray-100,
footer .bg-gray-800,
footer .bg-tlgray-700 {
  background-color: var(--ss-bg);
}
footer .text-white,
footer .text-gray-300,
footer .hover\:text-white:hover,
footer .hover\:text-gray-300:hover {
  color: var(--ss-text-secondary);
}

/* Accent (was blue-600) */
.bg-blue-600 {
  background-color: var(--ss-coral);
}
.text-blue-600,
.hover\:text-blue-600:hover {
  color: var(--ss-coral);
}
.hover\:border-blue-700:hover {
  border-color: var(--ss-coral-dark);
}

/* Headings / primary text */
.text-black,
.text-tlgray-800,
.text-gray-900 {
  color: var(--ss-text);
}

/* Body copy */
.text-tlgray-700,
.text-gray-700 {
  color: var(--ss-text-secondary);
}

/* Muted / meta text (dates, captions) */
.text-tlgray-400,
.text-tlgray-500,
.text-gray-400,
.text-gray-500,
.text-gray-600 {
  color: var(--ss-text-muted);
}
.text-gray-100 {
  color: var(--ss-border);
}

/* Text sitting on the always-dark surfaces above, so it stays cream */
.text-white,
.text-gray-300,
.hover\:text-white:hover,
.hover\:text-gray-300:hover {
  color: var(--ss-on-dark);
}

/* Borders / dividers */
.border-tlgray-200,
.border-neutral-300 {
  border-color: var(--ss-border);
}

/* Article body copy (Tailwind Typography's `prose` class sets its own
   color variables, independent of the utility classes above) */
.prose {
  --tw-prose-body: var(--ss-text-secondary);
  --tw-prose-headings: var(--ss-text);
  --tw-prose-lead: var(--ss-text-secondary);
  --tw-prose-links: var(--ss-coral);
  --tw-prose-bold: var(--ss-text);
  --tw-prose-counters: var(--ss-text-muted);
  --tw-prose-bullets: var(--ss-border);
  --tw-prose-hr: var(--ss-border);
  --tw-prose-quotes: var(--ss-text);
  --tw-prose-quote-borders: var(--ss-coral);
  --tw-prose-captions: var(--ss-text-muted);
  --tw-prose-kbd: var(--ss-text);
  --tw-prose-code: var(--ss-text);
  --tw-prose-pre-code: var(--ss-on-dark);
  --tw-prose-pre-bg: var(--ss-dark);
  --tw-prose-th-borders: var(--ss-border);
  --tw-prose-td-borders: var(--ss-border);
}

/* Tailwind Typography wraps inline `code` in literal backtick characters via
   ::before/::after; drop them so code spans render as plain monospace. */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
  content: none;
}

/* Typography sets inline `code` to font-weight 600; keep it at body weight so
   code spans don't read as bold. Fenced blocks already inherit 400 from <pre>. */
.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  font-weight: 400;
}

/* Executive summary callout (research posts): a bordered, tinted box that
   breaks out of the article's default prose flow so the summary reads as
   a distinct block rather than just another heading. Left border + label
   reuse the coral accent color per design-system.html's .t-label token. */
.exec-summary {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  background-color: color-mix(in oklab, var(--ss-coral) 6%, var(--ss-bg));
  border: 1px solid var(--ss-border);
  border-left: 4px solid var(--ss-coral);
  border-radius: 2px;
}
.exec-summary-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ss-coral-dark);
  margin: 0 0 0.75rem 0;
}
.exec-summary-body ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style-type: disc;
}
.exec-summary-body li {
  color: var(--ss-text-secondary);
  margin: 0.5rem 0;
}
.exec-summary-body li > strong:first-child {
  color: var(--ss-text);
}
.exec-summary-body p {
  margin: 0.5rem 0 0 0;
}

/* Pagination (theme ships its own dark: variants using default Tailwind
   grays; re-point those to the coral palette so it matches everywhere else) */
@media (prefers-color-scheme: dark) {
  .dark\:bg-warmgray-900 {
    background-color: var(--ss-bg);
  }
  .dark\:border-gray-600 {
    border-color: var(--ss-border);
  }
  .dark\:hover\:bg-warmgray-700:hover {
    background-color: var(--ss-border);
  }
}