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

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 222 47% 11%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 215 20% 65%;
    --radius: 0.5rem;
  }
}

@layer base {
  * { @apply border-border; }
  body {
    @apply bg-white text-[#0f172a];
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  .font-satoshi { font-family: 'Plus Jakarta Sans', 'Inter', ui-sans-serif, sans-serif; }
  .text-main { color: #0f172a; }
  .text-sec  { color: #007750; }
  .text-mtext { color: #64748b; }
  .bg-main  { background-color: #0f172a; }
  .bg-sec   { background-color: #007750; }
  .bg-bg    { background-color: #fbfcff; }
  .bg-bg2   { background-color: #f5f3f3; }
  .border-app { border-color: rgba(195,198,216,0.3); }
  .hover\:bg-sec:hover { background-color: #007750; }
}