/* =============================================================
   participant-theme.css
   MD3 color tokens as CSS variables — light & dark palettes.
   Overrides vendor/tailwind.css Tailwind utility classes and
   component styles for dark mode.
   Loaded after tailwind.css so equal-specificity rules here win.
   ============================================================= */

/* ── Light palette (matches hardcoded values in tailwind.css) ── */
:root {
  --color-primary:                    rgb(69 85 186);
  --color-primary-dim:                rgb(56 72 173);
  --color-primary-container:          rgb(223 224 255);
  --color-on-primary:                 rgb(249 246 255);
  --color-on-primary-container:       rgb(55 71 172);
  --color-surface:                    rgb(247 249 251);
  --color-surface-container-low:      rgb(240 244 247);
  --color-surface-container:          rgb(232 239 243);
  --color-surface-container-high:     rgb(225 233 238);
  --color-surface-container-highest:  rgb(217 228 234);
  --color-on-surface:                 rgb(42 52 57);
  --color-on-surface-variant:         rgb(86 97 102);
  --color-outline-variant:            rgb(169 180 185);
  --color-outline:                    rgb(110 121 126);
}

/* ── Dark palette (MD3 standard dark tone mapping, blue/indigo hue) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-primary:                    rgb(188 196 255);
    --color-primary-dim:                rgb(160 168 230);
    --color-primary-container:          rgb(39 54 154);
    --color-on-primary:                 rgb(17 35 120);
    --color-on-primary-container:       rgb(223 224 255);
    --color-surface:                    rgb(18 21 26);
    --color-surface-container-low:      rgb(22 27 32);
    --color-surface-container:          rgb(28 33 38);
    --color-surface-container-high:     rgb(38 43 49);
    --color-surface-container-highest:  rgb(48 54 60);
    --color-on-surface:                 rgb(220 228 233);
    --color-on-surface-variant:         rgb(169 180 185);
    --color-outline-variant:            rgb(60 72 77);
    --color-outline:                    rgb(130 141 146);
  }
}

/* ── Dark overrides for Tailwind utility classes ──────────────
   tailwind.css hardcodes light-mode RGB values.
   These rules load after tailwind.css; equal specificity, last wins.
   ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .bg-surface                        { background-color: var(--color-surface); }
  .bg-surface-container              { background-color: var(--color-surface-container); }
  .bg-surface-container-low          { background-color: var(--color-surface-container-low); }
  .bg-surface-container-high         { background-color: var(--color-surface-container-high); }
  .bg-surface-container-highest      { background-color: var(--color-surface-container-highest); }
  .hover\:bg-surface-container:hover      { background-color: var(--color-surface-container); }
  .hover\:bg-surface-container-low:hover  { background-color: var(--color-surface-container-low); }
  .hover\:bg-surface-container-high:hover { background-color: var(--color-surface-container-high); }
  .hover\:text-on-surface:hover           { color: var(--color-on-surface); }
  .bg-primary                  { background-color: var(--color-primary); }
  .bg-primary-dim              { background-color: var(--color-primary-dim); }
  .bg-primary-container        { background-color: var(--color-primary-container); }
  .bg-outline-variant          { background-color: var(--color-outline-variant); }

  .text-on-surface             { color: var(--color-on-surface); }
  .text-on-surface-variant     { color: var(--color-on-surface-variant); }
  .text-primary                { color: var(--color-primary); }
  .text-on-primary             { color: var(--color-on-primary); }
  .text-on-primary-container   { color: var(--color-on-primary-container); }

  .border-primary              { border-color: var(--color-primary); }
  .border-outline-variant      { border-color: var(--color-outline-variant); }
}

/* ── Emoji bar surface (replaces hardcoded inline rgba styles) ── */
.emoji-bar-surface {
  background: rgba(247, 249, 251, 0.4);
  border: 1.5px solid rgba(150, 160, 165, 0.6);
}
@media (prefers-color-scheme: dark) {
  .emoji-bar-surface {
    background: rgba(18, 21, 26, 0.6);
    border: 1.5px solid rgba(60, 72, 77, 0.7);
  }
}

/* ── Prose (agenda) dark overrides ──────────────────────────────
   Tailwind prose uses --tw-prose-* hardcoded for light backgrounds.
   Override here so headings/body/links are readable in dark mode.
   ─────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .prose {
    --tw-prose-headings:      rgb(220 228 233);
    --tw-prose-body:          rgb(196 204 210);
    --tw-prose-bold:          rgb(220 228 233);
    --tw-prose-links:         rgb(188 196 255);
    --tw-prose-counters:      rgb(169 180 185);
    --tw-prose-bullets:       rgb(130 141 146);
    --tw-prose-hr:            rgb(60 72 77);
    --tw-prose-quotes:        rgb(220 228 233);
    --tw-prose-quote-borders: rgb(60 72 77);
    --tw-prose-captions:      rgb(130 141 146);
    --tw-prose-code:          rgb(220 228 233);
    --tw-prose-pre-code:      rgb(220 228 233);
    --tw-prose-pre-bg:        rgb(28 33 38);
    --tw-prose-th-borders:    rgb(60 72 77);
    --tw-prose-td-borders:    rgb(38 43 49);
  }
}

/* ── Component dark overrides ────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  /* Frosted glass toolbar (PDF viewer, top-right) */
  .glass {
    background: rgba(18, 21, 26, 0.75);
  }

  /* Subtle drop shadow: lighter in dark mode to avoid harsh contrast */
  .whisper-shadow {
    box-shadow: 0px 12px 32px rgba(0, 0, 0, 0.35);
  }

  /* Scrollbar */
  ::-webkit-scrollbar-thumb {
    background: rgb(60 72 77);
  }
  ::-webkit-scrollbar-thumb:hover {
    background: rgb(90 102 107);
  }

  /* Avatar refresh button */
  .avatar-refresh-btn {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
  }
}

/* ── Green hover utility (follow button, download icons) ─────── */
.hover-green:hover {
  background-color: #4caf50;
  color: white;
}