/*
 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);
}
.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);
}

/* 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);
  }
}