@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap");

/* ── CSS custom properties (consumed by Tailwind @theme below) ── */

:root {
  --radius: 0.5rem;

  /* Semantic palette */
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 220 60% 15%;
  --background: 210 20% 98%;
  --foreground: 220 30% 10%;

  --primary: 220 60% 15%;
  --primary-foreground: 210 20% 98%;

  --secondary: 220 15% 95%;
  --secondary-foreground: 220 30% 10%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --muted: 220 15% 95%;
  --muted-foreground: 220 10% 46%;

  --accent: 220 15% 95%;
  --accent-foreground: 220 30% 10%;

  --popover: 0 0% 100%;
  --popover-foreground: 220 30% 10%;

  --card: 0 0% 100%;
  --card-foreground: 220 30% 10%;

  /* Sidebar */
  --sidebar-background: 220 60% 15%;
  --sidebar-foreground: 210 20% 98%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 220 60% 15%;
  --sidebar-accent: 220 40% 25%;
  --sidebar-accent-foreground: 210 20% 98%;
  --sidebar-border: 220 40% 25%;
  --sidebar-ring: 38 92% 50%;

  /* Brand colors */
  --navy: 220 60% 15%;
  --navy-light: 220 40% 25%;
  --maple: 0 72% 51%;
  --maple-light: 0 72% 95%;
  --amber: 38 92% 50%;
  --amber-light: 38 92% 95%;
  --verified: 152 60% 40%;
  --verified-light: 152 60% 95%;
}

.dark {
  --border: 220 13% 20%;
  --input: 220 13% 20%;
  --ring: 38 92% 50%;
  --background: 220 30% 8%;
  --foreground: 210 20% 95%;

  --primary: 38 92% 50%;
  --primary-foreground: 220 60% 15%;

  --secondary: 220 15% 15%;
  --secondary-foreground: 210 20% 95%;

  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 100%;

  --muted: 220 15% 15%;
  --muted-foreground: 220 10% 60%;

  --accent: 220 15% 15%;
  --accent-foreground: 210 20% 95%;

  --popover: 220 30% 10%;
  --popover-foreground: 210 20% 95%;

  --card: 220 30% 10%;
  --card-foreground: 210 20% 95%;

  --sidebar-background: 220 40% 8%;
  --sidebar-foreground: 210 20% 95%;
  --sidebar-primary: 38 92% 50%;
  --sidebar-primary-foreground: 220 60% 15%;
  --sidebar-accent: 220 30% 15%;
  --sidebar-accent-foreground: 210 20% 95%;
  --sidebar-border: 220 30% 15%;
  --sidebar-ring: 38 92% 50%;
}

/* ── Tailwind v4 @theme ── */

@theme {
  /* Semantic colors (via CSS variables) */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  /* Sidebar colors */
  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  /* Brand colors */
  --color-navy: hsl(var(--navy));
  --color-navy-light: hsl(var(--navy-light));
  --color-maple: hsl(var(--maple));
  --color-maple-light: hsl(var(--maple-light));
  --color-amber: hsl(var(--amber));
  --color-amber-light: hsl(var(--amber-light));
  --color-verified: hsl(var(--verified));
  --color-verified-light: hsl(var(--verified-light));

  /* Font families */
  --font-display: "DM Serif Display", serif;
  --font-body: "DM Sans", sans-serif;

  /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Keyframes */
  @keyframes accordion-down {
    from {
      height: 0;
    }

    to {
      height: var(--radix-accordion-content-height);
    }
  }

  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }

    to {
      height: 0;
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(12px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-fade-in: fade-in 0.5s ease-out forwards;
}

@utility container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 2rem;
  max-width: 1400px;
}

@layer base {
  body {
    font-family: var(--font-body);
    background: var(--color-background);
    color: var(--color-foreground);
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
  }
}

/* Stats grid: 2-col — hide right border on right column (8 Categories, 8 Verified) */
.home-stats-grid .home-stats-cell:nth-child(2n) {
  border-right-width: 0;
}

/* Stats grid: 4 columns in one row from 768px (overrides Tailwind order) */
@media (min-width: 768px) {
  .home-stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* 4-col — only last item has no right border; restore border on 2nd */
  .home-stats-grid .home-stats-cell:nth-child(2) {
    border-right-width: 1px;
  }

  .home-stats-grid .home-stats-cell:last-child {
    border-right-width: 0;
  }
}