/* ============================================================
   SHARED DESIGN TOKENS & BASE STYLES
   Liturgical Lower Third Graphics System
   ============================================================ */

/* --- Google Font Import (bundled-friendly fallback stack) --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
  /* Typography */
  --font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;

  /* Controller Dark Theme */
  --ctrl-bg: #0f1117;
  --ctrl-surface: #1a1d27;
  --ctrl-surface-2: #22263a;
  --ctrl-surface-3: #2a2f47;
  --ctrl-border: rgba(255, 255, 255, 0.08);
  --ctrl-border-hover: rgba(255, 255, 255, 0.18);
  --ctrl-text: #e8eaf0;
  --ctrl-text-muted: #7a80a0;
  --ctrl-text-dim: #4a5070;
  --ctrl-accent: #6c7fff;
  --ctrl-accent-hover: #8a9aff;
  --ctrl-accent-dim: rgba(108, 127, 255, 0.15);
  --ctrl-success: #4caf7d;
  --ctrl-success-dim: rgba(76, 175, 125, 0.15);
  --ctrl-warning: #f0a843;
  --ctrl-warning-dim: rgba(240, 168, 67, 0.15);
  --ctrl-danger: #e05a5a;
  --ctrl-danger-dim: rgba(224, 90, 90, 0.15);
  --ctrl-live: #e05a5a;

  /* Overlay design tokens */
  --ov-radius-outer: 14px;
  --ov-radius-inner: 10px;
  --ov-logo-size: 90px;
  --ov-shadow: 0 8px 40px rgba(0, 0, 0, 0.55);
  --ov-text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);

  /* Common spacing */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;

  /* Transitions */
  --transition-fast: 140ms ease;
  --transition-smooth: 220ms ease;
}

/* --- Global Resets --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

button {
  font-family: var(--font-family);
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
}

input,
textarea,
select {
  font-family: var(--font-family);
  outline: none;
}

input[type="color"] {
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* --- Utility Classes --- */
.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* --- Type badges (shared color map) --- */
.badge-lyric {
  background: rgba(92, 58, 139, 0.25);
  color: #b89af5;
  border-color: rgba(92, 58, 139, 0.5);
}

.badge-reading {
  background: rgba(74, 103, 65, 0.25);
  color: #82c97a;
  border-color: rgba(74, 103, 65, 0.5);
}

.badge-scripture {
  background: rgba(139, 90, 0, 0.25);
  color: #f0c060;
  border-color: rgba(139, 90, 0, 0.5);
}

.badge-announcement {
  background: rgba(30, 90, 160, 0.25);
  color: #7ab0f5;
  border-color: rgba(30, 90, 160, 0.5);
}

.badge-custom {
  background: rgba(80, 80, 80, 0.25);
  color: #a0a8c0;
  border-color: rgba(80, 80, 80, 0.5);
}

.badge-mazmur {
  background: rgba(160, 30, 120, 0.25);
  color: #f57ae0;
  border-color: rgba(160, 30, 120, 0.5);
}

.badge-fullscreen_text {
  background: rgba(30, 140, 140, 0.25);
  color: #7af5f5;
  border-color: rgba(30, 140, 140, 0.5);
}