@import "tailwindcss";
@import "tw-animate-css";
@import "@fontsource/outfit/400.css";
@import "@fontsource/outfit/500.css";
@import "@fontsource/outfit/600.css";
@import "@fontsource/outfit/700.css";
@import "@fontsource/outfit/800.css";
@import "@fontsource/ibm-plex-mono/400.css";
@import "@fontsource/ibm-plex-mono/500.css";
@import "@fontsource/ibm-plex-mono/600.css";

@theme inline {
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --color-background: #ffffff;
  --color-foreground: #1a1a1a;
  --color-card: #ffffff;
  --color-card-foreground: #1a1a1a;
  --color-muted: #f0f0f0;
  --color-muted-foreground: #666666;
  --color-primary: #f5e642;
  --color-primary-foreground: #1a1a1a;
  --color-secondary: #f0f0f0;
  --color-secondary-foreground: #1a1a1a;
  --color-border: #1a1a1a;
  --color-input: #1a1a1a;
  --color-ring: #f5e642;
  --color-destructive: #ff3b3b;
  --color-destructive-foreground: #ffffff;
  --color-accent: #f5e642;
  --color-accent-foreground: #1a1a1a;
  --color-popover: #ffffff;
  --color-popover-foreground: #1a1a1a;

  --color-green-gain: #ff3b8b;
  --color-green-gain-muted: #ff3b8b1a;
  --color-red-loss: #ff3b3b;
  --color-red-loss-muted: #ff3b3b1a;
  --color-accent-amber: #f5e642;
  --color-success: #ff3b8b;

  --radius-sm: 8px;
  --radius-md: 8px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-2xl: 8px;
  --radius-3xl: 8px;
  --radius-4xl: 8px;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  html {
    @apply font-sans antialiased;
  }
  body {
    @apply bg-background text-foreground;
    min-height: 100vh;
    background-image: radial-gradient(circle, #d4d4d4 1px, transparent 1px);
    background-size: 24px 24px;
    background-attachment: fixed;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-sans font-bold;
  }
}

@layer components {
  .neo-shadow {
    box-shadow: 4px 4px 0 #1a1a1a;
  }

  .neo-shadow-sm {
    box-shadow: 2px 2px 0 #1a1a1a;
  }

  .neo-shadow-lg {
    box-shadow: 6px 6px 0 #1a1a1a;
  }

  .neo-shadow-yellow {
    box-shadow: 4px 4px 0 #f5e642;
  }

  .neo-shadow-pink {
    box-shadow: 4px 4px 0 #ff3b8b;
  }

  .btn-primary {
    @apply bg-primary text-primary-foreground rounded-sm uppercase tracking-wide font-bold border-2 border-foreground;
    box-shadow: 4px 4px 0 #1a1a1a;
  }

  .btn-primary:hover {
    box-shadow: 2px 2px 0 #1a1a1a;
    transform: translate(2px, 2px);
  }

  .btn-primary:active {
    box-shadow: 0 0 0 #1a1a1a;
    transform: translate(4px, 4px);
  }

  .card-brutalist {
    @apply bg-card border-2 border-foreground rounded-sm;
    box-shadow: 4px 4px 0 #1a1a1a;
  }

  .card-brutalist:hover {
    box-shadow: 2px 2px 0 #1a1a1a;
    transform: translate(2px, 2px);
  }
}

:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}