/* @config "../tailwind.config.js"; */
@import "tailwindcss";
@import "./tokens.css";

:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

@layer base {
  body {
    background-color: var(--color-surface-muted);
    color: var(--color-text-primary);
    transition: background-color 0.25s ease, color 0.25s ease;
  }

  ::selection {
    background-color: var(--color-brand-500);
    color: var(--color-text-inverse);
  }

  .surface-card {
    background-color: var(--color-surface-card);
    border: 1px solid var(--color-border-strong);
    box-shadow: 0 20px 80px rgba(15, 23, 42, 0.08);
  }

  .glass-panel {
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
    backdrop-filter: blur(20px);
  }
}