@import 'tailwindcss';

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KEwg.woff2")
    format("woff2");
}

@font-face {
  font-family: "Cabin";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/cabin/v27/u-4X0qWljRw-PfU81xCKCpdpbgZJl6XFpfEd7eA9BIxxkQ.woff2")
    format("woff2");
}

/* ============================================================
   THEME
   ============================================================ */
@theme {
  --color-background: #0d0d0d;
  --color-foreground: #f5f5f5;
  --color-muted: #a1a1aa;
  --color-card: #1a1a1a;
  --color-card-dark: #141414;
  --color-border: rgba(251, 191, 36, 0.12);
  --color-border-hover: rgba(251, 191, 36, 0.35);
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;
  --color-grid: rgba(255, 255, 255, 0.04);

  --font-sans: "PT Sans", system-ui, sans-serif;
  --font-heading: "Cabin", system-ui, sans-serif;

  --shadow-amber-glow: 0 8px 30px rgba(245, 158, 11, 0.25);
  --shadow-amber-glow-lg: 0 16px 50px rgba(245, 158, 11, 0.35);
}

/* ============================================================
   BASE STYLES
   ============================================================ */
* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  background-color: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
}

/* ============================================================
   CUSTOM UTILITIES
   ============================================================ */
.section-grid-background {
  background-color: transparent;
  background-image:
    linear-gradient(
      0deg,
      transparent 24%,
      var(--color-grid) 25%,
      var(--color-grid) 26%,
      transparent 27%,
      transparent 74%,
      var(--color-grid) 75%,
      var(--color-grid) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--color-grid) 25%,
      var(--color-grid) 26%,
      transparent 27%,
      transparent 74%,
      var(--color-grid) 75%,
      var(--color-grid) 76%,
      transparent 77%,
      transparent
    );
  background-size: 50px 50px;
}

.section-box-shadow {
  box-shadow: inset 0 0 150px -10px rgba(161, 161, 170, 0.3);
}

.bg-card-gradient {
  background: linear-gradient(145deg, #232323 0%, #161616 100%);
}

.bg-card-footer {
  background-color: #111111;
}

.amber-glow-hover {
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.amber-glow-hover:hover {
  box-shadow: var(--shadow-amber-glow);
  transform: translateY(-4px) scale(1.01);
  border-color: var(--color-border-hover);
}

.amber-btn-shimmer {
  position: relative;
  overflow: hidden;
}
.amber-btn-shimmer::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 2.5s infinite;
}
@keyframes shimmer {
  0% { left: -75%; }
  100% { left: 125%; }
}