@import "tailwindcss";
@config "../../tailwind.config.js";

@layer base {
  body {
    background-color: #f8fafc;
    color: #0f172a;
  }
  html.dark body {
    background-color: #020617;
    color: #ffffff;
  }
}

@layer components {
  .card-label {
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.48);
    margin: 0;
  }
  html.dark .card-label {
    color: rgba(255, 255, 255, 0.48);
  }
  .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin-top: 0.25rem;
    color: #1d1d1f;
    line-height: 1.2;
  }
  html.dark .card-value {
    color: #ffffff;
  }
}