@import "tailwindcss";

@theme {
  --font-sans: "Inter", "system-ui", "-apple-system", "Segoe UI", "sans-serif";

  --color-brand: #0071e3;
  --color-brand-dark: #0066cc;
  --color-brand-soft: #409cff;

  --color-surface-light: #f5f7fb;
  --color-surface-dark: #0b1220;

  --color-card-light: #ffffff;
  --color-card-dark: #151c2c;

  --shadow-glass: 0 10px 30px rgba(15,23,42,0.08);
  --shadow-glassDark: 0 20px 45px rgba(0,0,0,0.45);

  --radius-xl: 1rem;
}

@variant dark (&:where(.dark, .dark *));

@layer base {
  body {
    font-family: var(--font-sans);
    background-color: var(--color-surface-light);
    color: #0f172a;
    min-height: 100vh;
  }

  :root.dark body {
    background-color: var(--color-surface-dark);
    color: #f8fafc;
  }

  #app {
    min-height: 100vh;
  }
}

@layer utilities {
  .scrollbar-muted {
    scrollbar-width: thin;
    scrollbar-color: #94a3b8 transparent;
  }

  .scrollbar-muted::-webkit-scrollbar {
    width: 0.4rem;
  }

  .scrollbar-muted::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-muted::-webkit-scrollbar-thumb {
    background-color: #94a3b8;
    border-radius: 9999px;
  }

  .scrollbar-nowidth {
    scrollbar-width: none;
  }

  .scrollbar-nowidth::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }

  .scrollbar-nowidth::-webkit-scrollbar-track {
    background: transparent;
  }

  .scrollbar-nowidth::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 0;
  }
}