/* ============================================================
   NorthCreek Church — Dark Theme Override
   Load AFTER colors_and_type.css.
   Remaps semantic tokens for the live-translation app (dark UI).
   Component code should only ever reference the semantic tokens
   (--fg-*, --bg-*, --border-*) — never raw hex — so light/dark
   is a one-file swap.
   ============================================================ */

:root {
  /* Foreground */
  --fg-primary:   #f0f0f0;             /* captions, headings */
  --fg-secondary: #a0a0a0;             /* supporting text, timestamps */
  --fg-tertiary:  #6e6e6e;             /* placeholders, finest print */
  --fg-on-dark:   #ffffff;
  --fg-accent:    #4d93ff;             /* blue-300: brand blue lightened for
                                          contrast on near-black (AA on #0f0f0f) */

  /* Background */
  --bg-base:        #0a0a0a;           /* page — near-black, OLED-friendly */
  --bg-subtle:      #141414;           /* raised sections */
  --bg-muted:       #1e1e1e;           /* cards, inputs, pills */
  --bg-inverted:    #ffffff;
  --bg-accent:      #0078f8;           /* keep full brand blue for solid fills */
  --bg-accent-tint: rgba(0, 120, 248, 0.12);

  /* Border */
  --border-subtle:  #1e1e1e;
  --border-default: #313131;
  --border-strong:  #4a4a4a;
  --border-accent:  #4d93ff;

  /* Shadows read poorly on dark — use borders for elevation instead */
  --shadow-sm: none;
  --shadow-md: 0 0 0 1px var(--border-subtle);
  --shadow-lg: 0 0 0 1px var(--border-default);
  --shadow-xl: 0 0 0 1px var(--border-default);
}

body {
  color: var(--fg-primary);
  background: var(--bg-base);
}

/* Dark-adjusted button variants */
.btn-secondary {
  color: var(--fg-primary);
  border-color: var(--border-default);
}
.btn-secondary:hover { border-color: var(--fg-accent); color: var(--fg-accent); }
.btn-ghost { color: var(--fg-accent); }
.btn-ghost:hover { color: #80b2ff; }

.card { background: var(--bg-subtle); border: 1px solid var(--border-subtle); box-shadow: none; }
.card-flat { background: var(--bg-subtle); border-color: var(--border-subtle); }

a { color: var(--fg-accent); }
a:hover { color: #80b2ff; }