/* @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);
  }
}

@layer utilities {
  .bg-brand {
    background: var(--color-gradient-brand);
  }

  .bg-brand-soft {
    background: linear-gradient(135deg, var(--color-brand-from-20), var(--color-brand-to-20));
  }

  .bg-brand-horizontal-soft {
    background: linear-gradient(90deg, var(--color-brand-from-20), var(--color-brand-to-20));
  }

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

  .text-brand-gradient {
    background: var(--color-gradient-brand);
    -webkit-background-clip: text;
    color: transparent;
  }

  .hover\:text-brand-gradient:hover {
    background: var(--color-gradient-brand);
    -webkit-background-clip: text;
    color: transparent;
  }

  .shadow-brand-20 {
    box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
  }
}