@import './blackroad-os-brand/tokens.css';

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

:root {
  --ifm-color-primary: var(--br-brand-ink);
  --ifm-color-primary-dark: #0c1223;
  --ifm-color-primary-darker: #0a0e1b;
  --ifm-color-primary-darkest: #070a14;
  --ifm-color-primary-light: #131d32;
  --ifm-color-primary-lighter: #1b2640;
  --ifm-color-primary-lightest: #24304d;
  --ifm-background-color: var(--br-brand-surface);
  --ifm-font-color-base: var(--br-brand-foreground);
  --ifm-link-color: var(--br-brand-glow);
  --ifm-navbar-background-color: rgba(12, 18, 35, 0.95);
}

[data-theme='dark'] {
  --ifm-background-color: var(--br-brand-surface);
  --ifm-font-color-base: var(--br-brand-foreground);
}

.hero--primary {
  background: linear-gradient(120deg, var(--br-brand-ink) 0%, #1f2937 35%, var(--br-brand-accent) 100%);
}

.homepage-hero {
  text-align: left;
  color: white;
}

.homepage-hero .buttons {
  display: flex;
  gap: 1rem;
}

.card-grid {
  @apply grid gap-6 md:grid-cols-2;
}

.card-grid .card {
  @apply bg-slate-800/60 border border-slate-700 p-6 rounded-xl shadow-lg;
}

.footer--dark {
  background: linear-gradient(180deg, var(--br-brand-ink) 0%, #0f172a 40%, #050914 100%);
}