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

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

:root {
  /* GEO Design System - Light Mode */
  --background: 220 14% 98%;   /* #FAFBFC */
  --foreground: 220 87% 12%;   /* #111827 */
  --card: 0 0% 100%;           /* #FFFFFF */
  --card-foreground: 220 87% 12%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 87% 12%;
  --primary: 161 94% 39%;      /* #10B981 */
  --primary-foreground: 0 0% 100%;
  --secondary: 220 9% 46%;     /* #6B7280 secondary text as bg */
  --secondary-foreground: 0 0% 100%;
  --muted: 220 14% 96%;
  --muted-foreground: 220 9% 62%; /* #9CA3AF */
  --accent: 24 95% 53%;        /* #F97316 orange */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;
  --border: 220 13% 91%;       /* #E5E7EB */
  --input: 220 13% 91%;
  --ring: 161 94% 39%;         /* primary green */
  --radius: 1rem;              /* 16px base radius */

  /* GEO Custom tokens */
  --geo-nav-bg: #FFFFFF;
  --geo-nav-hover: #F3F4F6;
  --geo-nav-active: #10B981;
  --geo-nav-text: #374151;
  --geo-nav-text-active: #059669;
  --geo-nav-active-bg: #ECFDF5;
  --geo-shadow-card: 0 1px 3px rgba(0,0,0,0.04);
  --geo-shadow-card-hover: 0 4px 12px rgba(0,0,0,0.06);
  --geo-transition: 200ms ease;
}

.dark {
  /* GEO Design System - Dark Mode */
  --background: 222 47% 8%;
  --foreground: 210 40% 96%;
  --card: 222 47% 10%;
  --card-foreground: 210 40% 96%;
  --popover: 222 47% 10%;
  --popover-foreground: 210 40% 96%;
  --primary: 161 94% 39%;      /* keep green */
  --primary-foreground: 0 0% 100%;
  --secondary: 217 33% 18%;
  --secondary-foreground: 210 40% 96%;
  --muted: 217 33% 15%;
  --muted-foreground: 215 20% 60%;
  --accent: 24 95% 53%;        /* keep orange */
  --accent-foreground: 0 0% 100%;
  --destructive: 0 63% 40%;
  --destructive-foreground: 210 40% 96%;
  --border: 217 33% 18%;
  --input: 217 33% 18%;
  --ring: 161 94% 39%;
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }

  /* GEO Card hover effect */
  .geo-card {
    @apply bg-white rounded-lg border border-geo-border shadow-card transition-all duration-200;
  }
  .geo-card:hover {
    @apply shadow-card-hover border-primary/30;
  }

  /* GEO Scrollbar */
  .geo-scrollbar::-webkit-scrollbar {
    width: 4px;
  }
  .geo-scrollbar::-webkit-scrollbar-track {
    background: transparent;
  }
  .geo-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-border rounded-full;
  }

  /* Number stat display */
  .stat-number {
    @apply text-4xl font-bold tracking-tight text-geo-text-primary;
    font-variant-numeric: tabular-nums;
  }

  /* Bento grid */
  .bento-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }
}