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

:root {
  --color-bg: #0a0a0a;
  --color-surface: #141414;
  --color-surface-2: #1c1c1c;
  --color-accent: #ff7a00;
  --color-accent-dim: #e85d00;
  --color-accent-glow: #ffb020;
  --color-silver: #c8cdd4;
  --color-text: #ffffff;
  --color-muted: #9ca3af;
  --color-border: #2a2a2a;
  --container-max: 1200px;
}

@layer base {
  *,
  ::after,
  ::before {
    border-color: #2a2a2a;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: #0a0a0a;
    color: #ffffff;
    font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
    min-height: 100vh;
  }

  ::selection {
    background: rgba(255, 122, 0, 0.4);
    color: #ffffff;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}

@layer utilities {
  .container-shell {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  .font-display {
    font-family: var(--font-space), ui-sans-serif, system-ui, sans-serif;
  }

  .font-alt {
    font-family: var(--font-poppins), ui-sans-serif, system-ui, sans-serif;
  }

  .text-gradient {
    background: linear-gradient(135deg, #ffb347 0%, #ff7a00 45%, #e85d00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .text-metal {
    background: linear-gradient(180deg, #f3f5f7 0%, #c8cdd4 45%, #8b929c 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .glass {
    background: rgba(20, 20, 20, 0.78);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
  }

  .grid-bg {
    background-image:
      radial-gradient(circle at 20% 20%, rgba(255, 122, 0, 0.18), transparent 35%),
      radial-gradient(circle at 80% 10%, rgba(255, 176, 32, 0.1), transparent 30%),
      linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: auto, auto, 48px 48px, 48px 48px;
  }

  .shimmer {
    background: linear-gradient(90deg, #141414 25%, #222 37%, #141414 63%);
    background-size: 400% 100%;
    animation: shimmer 1.4s ease infinite;
  }

  @keyframes shimmer {
    0% {
      background-position: 100% 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  @keyframes float-y {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }

  .animate-float {
    animation: float-y 6s ease-in-out infinite;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}