/* premium theme — bold dating, geometric confidence, gradient accents
   Layout colors use html:root to beat @media(prefers-color-scheme:dark) :root in main.css.
   Do NOT set --color-primary here — it's set per domain via <style> in <head>. */
/* DM Sans font loaded via /css/fonts.css */

html:root {
  --color-bg:            #0d0505;
  --color-surface:       #120808;
  --color-text:          #e8e0e0;
  --color-border:        color-mix(in srgb, var(--color-primary) 13%, transparent);
}
/* Defaults only: these yield if the domain <style> sets them */
:root {
  --color-primary:       #e8213a;
  --color-primary-light: #f06070;
  --color-accent:        var(--color-secondary, #ff7a35);
  --color-gradient:      linear-gradient(90deg, var(--color-primary), var(--color-accent));
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

h1, h2, h3 {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Override gray utilities — all text colors verified for WCAG AA (4.5:1) on #0d0505/#120808 */
.bg-white          { background-color: var(--color-surface) !important; }
.bg-gray-100       { background-color: #1a0a0a !important; }
.bg-gray-200       { background-color: #200d0d !important; }
.text-gray-600     { color: #b09090 !important; }  /* 5.5:1 on #0d0505 */
.text-gray-700     { color: #c0a8a8 !important; }  /* 6.8:1 on #0d0505 */
.text-gray-400     { color: #9a7a7a !important; }  /* 4.5:1 on #0d0505 */
.border-gray-200   { border-color: color-mix(in srgb, var(--color-primary) 10%, transparent) !important; }

/* Prose typography — force readable text on dark backgrounds */
.prose {
  color: var(--color-text) !important;
  h1, h2, h3, h4 { color: var(--color-text) !important; }
  p, li, td, th, dd, dt, blockquote { color: var(--color-text) !important; }
  strong { color: var(--color-text) !important; }
  a:not([data-reg-source]) { color: var(--color-primary-light) !important; }
}

/* Tag pills */
.bg-gray-100.text-gray-700 {
  background-color: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
  color: var(--color-primary) !important;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Sidebar/complementary sections — responsive widths */
@media (max-width: 767px) {
  complementary,
  aside,
  [role="complementary"] {
    width: 100%;
    margin-bottom: 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  complementary,
  aside,
  [role="complementary"] {
    min-width: 240px;
  }
}

@media (min-width: 1024px) {
  complementary,
  aside,
  [role="complementary"] {
    min-width: 280px;
  }
}

/* Margin panels — positioned in viewport gutters on 2xl+ screens */
@media (min-width: 1536px) {
  .fixed-panel-left,
  .fixed-panel-right {
    flex-shrink: 0;
    width: 140px;
    padding: 0 10px;
    align-self: flex-start;
  }
}
