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

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
  }

  body {
    background-color: theme('colors.gray.50');
    background-image: radial-gradient(circle, theme('colors.gray.300') 0.75px, transparent 0.75px);
    background-size: 16px 16px;
  }
}

@layer components {
  /* Left-aligned container matching the design's max-width + smart margin */
  .container-content {
    max-width: 1000px;
    margin-left: max(2.5rem, calc((100vw - 1500px) / 2 + 2.5rem));
    margin-right: auto;
    padding-right: 2.5rem;
  }

  /* Strategy card transitions */
  .strat-card {
    transition: transform 0.4s cubic-bezier(.2,.9,.3,1.2), box-shadow 0.3s;
  }
  .strat-card:hover {
    transform: translate(-2px, -2px) rotate(-0.4deg);
    box-shadow: 9px 9px 0 theme('colors.cyan.700');
  }
  .strat-card .strat-rule {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}