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

@theme {
  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Barlow Condensed", "DM Sans", ui-sans-serif, system-ui, sans-serif;

  /* Brand: #003764 navy · #005cb9 blue · #aa182c red */
  --color-bg: #002848;
  --color-bg-elevated: #003764;
  --color-surface: #0a3f6d;
  --color-surface-2: #0f4a7a;
  --color-fg: #f4f7fb;
  --color-fg-muted: #b0c4d8;
  --color-fg-subtle: #7e99b3;
  --color-border: #1a527a;
  --color-border-strong: #2a6a96;

  --color-navy: #003764;
  --color-navy-deep: #00253f;
  --color-blue: #005cb9;
  --color-blue-hover: #004a96;
  --color-primary: #aa182c;
  --color-primary-hover: #8e1324;
  --color-primary-fg: #ffffff;
  --color-accent: #005cb9;
  --color-accent-fg: #ffffff;
  --color-success: #1f9d55;
  --color-ring: #005cb9;

  --radius-xs: 0.25rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 12px 40px rgba(0, 39, 63, 0.45);
  --shadow-soft: 0 8px 30px rgba(0, 39, 63, 0.35);
}

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

  * {
    border-color: var(--color-border);
  }

  body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-feature-settings: "ss01" on, "cv11" on;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

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

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

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

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

  .bg-field-noise {
    background-image:
      radial-gradient(ellipse 80% 50% at 50% -10%, rgba(170, 24, 44, 0.22), transparent 55%),
      radial-gradient(ellipse 60% 40% at 100% 0%, rgba(0, 92, 185, 0.35), transparent 50%),
      linear-gradient(180deg, var(--color-navy-deep) 0%, var(--color-bg) 55%);
  }

  .diamond-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}