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

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Color Theme Variables */
:root {
  --color-brand-dark: #0B1120;
  --color-brand-card: #1E293B;
  --color-brand-border: #334155;
  --color-brand-accent: #0EA5E9;
  --color-brand-accent-hover: #0284C7;
  --color-brand-gold: #F59E0B;
}

/* Base Body Styles */
body {
  background-color: var(--color-brand-dark);
  color: #f1f5f9;
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Custom Utilities & Highlights */
.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

.bg-brand-dark {
  background-color: var(--color-brand-dark);
}

.bg-brand-card {
  background-color: var(--color-brand-card);
}

.border-brand-border {
  border-color: var(--color-brand-border);
}

.text-brand-accent {
  color: var(--color-brand-accent);
}

.bg-brand-accent {
  background-color: var(--color-brand-accent);
}

.bg-brand-accent:hover {
  background-color: var(--color-brand-accent-hover);
}

.text-brand-gold {
  color: var(--color-brand-gold);
}

/* Visual Active Ring Highlight */
.ring-active-highlight {
  box-shadow: 0 0 0 2px #0EA5E9;
  transition: box-shadow 0.2s ease-in-out;
}