@import "tailwindcss";
@import "tw-animate-css";

@theme {
  --color-bg: #0a0b0d;
  --color-surface: #12141a;
  --color-surface-2: #1a1d26;
  --color-surface-3: #232733;
  --color-fg: #f0f1f3;
  --color-muted: #9aa0ad;
  --color-subtle: #6b7280;
  --color-border: #2a2f3a;
  --color-border-strong: #3d4454;
  --color-primary: #e8eaef;
  --color-primary-fg: #0a0b0d;
  --color-accent: #5b8def;
  --color-accent-fg: #f0f1f3;
  --color-success: #3d9b6a;
  --color-warning: #c9a227;
  --color-danger: #c45c5c;
  --color-diamond: #7eb8d4;
  --color-rare: #5b8def;
  --color-epic: #a78bfa;
  --color-legend: #e8b84a;

  --font-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-elevated: 0 12px 40px rgba(0, 0, 0, 0.55);
}

@layer base {
  *,
  *::before,
  *::after {
    border-color: var(--color-border);
  }

  html {
    color-scheme: dark;
    -webkit-tap-highlight-color: transparent;
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }

  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  ::selection {
    background: color-mix(in oklab, var(--color-accent) 40%, transparent);
    color: var(--color-fg);
  }

  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer utilities {
  .font-display {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
  }

  .text-balance {
    text-wrap: balance;
  }

  .card-foil {
    background:
      linear-gradient(
        135deg,
        color-mix(in oklab, var(--color-surface-2) 90%, white 10%) 0%,
        var(--color-surface) 40%,
        color-mix(in oklab, var(--color-surface-2) 85%, var(--color-accent) 15%) 100%
      );
  }

  .safe-pb {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}