/* Self-hosted via @fontsource-variable/inter and @fontsource-variable/outfit — no render-blocking Google Fonts request */
@import "@fontsource-variable/inter";
@import "@fontsource-variable/outfit";

@import "tailwindcss";
@import "@agent-native/core/styles/agent-native.css";
@import "@agent-native/toolkit/styles.css";

@source "./**/*.{ts,tsx}";

:root {
  --background: 0 0% 13%;
  --foreground: 0 0% 98%;
  --card: 0 0% 15%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 15%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 10%;
  --secondary: 0 0% 18%;
  --secondary-foreground: 0 0% 96%;
  --muted: 0 0% 16%;
  --muted-foreground: 0 0% 50%;
  --accent: 0 0% 18%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 91% 71%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 24%;
  --input: 0 0% 24%;
  --ring: 0 0% 35%;
  --radius: 0.75rem;
  --sidebar-background: 0 0% 10%;
  --sidebar-foreground: 0 0% 50%;
  --sidebar-primary: 0 0% 98%;
  --sidebar-primary-foreground: 0 0% 10%;
  --sidebar-accent: 0 0% 16%;
  --sidebar-accent-foreground: 0 0% 98%;
  --sidebar-border: 0 0% 20%;
  --sidebar-ring: 0 0% 35%;
}

.light {
  --background: 0 0% 99%;
  --foreground: 0 0% 8%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 8%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 8%;
  --primary: 0 0% 8%;
  --primary-foreground: 0 0% 100%;
  --secondary: 0 0% 96%;
  --secondary-foreground: 0 0% 8%;
  --muted: 0 0% 94%;
  --muted-foreground: 0 0% 45%;
  --accent: 0 0% 94%;
  --accent-foreground: 0 0% 8%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 90%;
  --input: 0 0% 90%;
  --ring: 0 0% 20%;
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 0 0% 45%;
  --sidebar-primary: 0 0% 8%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 0 0% 94%;
  --sidebar-accent-foreground: 0 0% 8%;
  --sidebar-border: 0 0% 90%;
  --sidebar-ring: 0 0% 20%;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply text-foreground font-sans antialiased;
    background:
      radial-gradient(
        ellipse 80% 60% at 50% -10%,
        rgba(255, 255, 255, 0.02),
        transparent 50%
      ),
      hsl(var(--background));
    min-height: 100vh;
  }

  ::selection {
    background: rgba(255, 255, 255, 0.15);
  }
}

.macros-entry-container {
  container: macros-entry / inline-size;
}

.macros-entry-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.macros-summary-grid {
  display: grid;
  gap: 1.5rem;
}

.macros-summary-chart {
  display: none;
}

@container macros-entry (min-width: 640px) {
  .macros-entry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .macros-weight-section {
    grid-column: 1 / -1;
  }
}

@container macros-entry (min-width: 960px) {
  .macros-entry-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .macros-weight-section {
    grid-column: auto;
  }
}

@container macros-entry (min-width: 1040px) {
  .macros-summary-grid {
    gap: 2rem;
    grid-template-columns: minmax(0, 1fr) 340px;
  }

  .macros-summary-chart {
    display: flex;
  }
}