@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  color-scheme: dark;
  --omda-bg: oklch(5% 0.01 264);
  --omda-bg-secondary: oklch(8% 0.015 240);
  --omda-bg-navy: oklch(6% 0.02 240);
  --omda-panel: oklch(12% 0.015 240);
  --omda-panel-raised: oklch(15% 0.018 240);
  --omda-crimson: oklch(45% 0.22 25);
  --omda-crimson-hover: oklch(52% 0.24 25);
  --omda-crimson-glow: oklch(45% 0.22 25 / 0.35);
  --omda-gold: oklch(72% 0.12 75);
  --omda-gold-subtle: oklch(72% 0.12 75 / 0.6);
  --omda-text: oklch(97% 0.005 240);
  --omda-muted: oklch(68% 0.01 240);
  --omda-border: oklch(100% 0 0 / 0.10);
  --omda-border-strong: oklch(100% 0 0 / 0.18);
  --omda-success: oklch(76% 0.17 145);
  --omda-warning: oklch(78% 0.16 75);
  --omda-danger: oklch(62% 0.24 25);
  --omda-font-sans: 'Space Grotesk', system-ui, sans-serif;
  --omda-font-display: 'Rajdhani', 'Space Grotesk', sans-serif;
  --omda-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  --omda-radius-sm: 0.375rem;
  --omda-radius-md: 0.625rem;
  --omda-radius-lg: 0.875rem;
  --omda-shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
  --omda-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --omda-logo-url: url('https://theomda.com/assets/img/theomda_logo_blink_header_transparent.gif');
}

.omda-brand-logo {
  display: block;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-image: var(--omda-logo-url);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  border: 1px solid oklch(45% 0.22 25 / 0.4);
  box-shadow: 0 0 12px oklch(45% 0.22 25 / 0.2);
  transition: transform 200ms var(--omda-ease), box-shadow 200ms var(--omda-ease);
}

.omda-brand-logo:hover {
  transform: scale(1.04);
  box-shadow: 0 0 22px oklch(45% 0.22 25 / 0.38);
}

.omda-card {
  background: linear-gradient(145deg, var(--omda-panel), var(--omda-bg-secondary));
  border: 1px solid var(--omda-border);
  border-radius: var(--omda-radius-md);
  box-shadow: var(--omda-shadow);
  transition: border-color 200ms var(--omda-ease), transform 200ms var(--omda-ease), box-shadow 200ms var(--omda-ease);
}

.omda-card:hover {
  border-color: oklch(45% 0.22 25 / 0.42);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4), 0 0 22px oklch(45% 0.22 25 / 0.1);
}

.omda-button-primary,
.omda-button-secondary {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: var(--omda-radius-sm);
  padding: 0.7rem 1rem;
  font-family: var(--omda-font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 180ms var(--omda-ease), background 180ms var(--omda-ease), transform 180ms var(--omda-ease), box-shadow 180ms var(--omda-ease);
}

.omda-button-primary {
  color: var(--omda-text);
  border: 1px solid var(--omda-crimson);
  background: linear-gradient(135deg, var(--omda-crimson), oklch(38% 0.19 25));
  box-shadow: 0 0 18px var(--omda-crimson-glow);
}

.omda-button-primary:hover {
  background: linear-gradient(135deg, var(--omda-crimson-hover), var(--omda-crimson));
  transform: translateY(-1px);
  box-shadow: 0 0 26px var(--omda-crimson-glow);
}

.omda-button-secondary {
  color: var(--omda-muted);
  border: 1px solid var(--omda-border-strong);
  background: var(--omda-bg-secondary);
}

.omda-button-secondary:hover {
  color: var(--omda-text);
  border-color: oklch(45% 0.22 25 / 0.55);
  transform: translateY(-1px);
}

.omda-kicker {
  color: var(--omda-crimson);
  font-family: var(--omda-font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.omda-muted { color: var(--omda-muted); }
.omda-mono { font-family: var(--omda-font-mono); }
.omda-display { font-family: var(--omda-font-display); }

.omda-section-divider {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, var(--omda-crimson), transparent);
}

.omda-status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--omda-muted);
}

.omda-status-dot[data-state='online'] {
  background: var(--omda-success);
  box-shadow: 0 0 12px color-mix(in oklch, var(--omda-success), transparent 35%);
}

.omda-status-dot[data-state='warning'] {
  background: var(--omda-warning);
  box-shadow: 0 0 12px color-mix(in oklch, var(--omda-warning), transparent 35%);
}

.omda-status-dot[data-state='offline'] {
  background: var(--omda-danger);
  box-shadow: 0 0 12px color-mix(in oklch, var(--omda-danger), transparent 35%);
}