@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: #0e1428;
  --color-primary: #c73b6f;
  --color-accent: #7b9e89;
  --color-text: #eaeaea;
  --color-textSecondary: #aaaaaa;
  --color-statusSeen: #4ade80;
  --color-statusUpcoming: #facc15;
  --color-statusArchived: #525252;
}

@layer base {
  body {
    @apply bg-background text-text;
  }

  .container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
  }

  .container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 15px;
  }

  .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
  }
}

@utility col-* {
  width: calc(--value(integer) / 0.12 * 1%);
  padding: 0 15px;
}