@import "tailwindcss";

@theme {
  /* Surface Colors */
  --color-surface: #131313;
  --color-surface-dim: #131313;
  --color-surface-bright: #3a3939;
  --color-surface-container-lowest: #0e0e0e;
  --color-surface-container-low: #1c1b1b;
  --color-surface-container: #201f1f;
  --color-surface-container-high: #2a2a2a;
  --color-surface-container-highest: #353534;
  --color-on-surface: #e5e2e1;
  --color-on-surface-variant: #bac9cc;
  --color-inverse-surface: #e5e2e1;
  --color-inverse-on-surface: #313030;
  --color-surface-variant: #353534;
  --color-background: #131313;
  --color-on-background: #e5e2e1;

  /* Primary */
  --color-primary: #a3c6ff;
  --color-on-primary: #172554;
  --color-primary-container: #3b82f6;
  --color-on-primary-container: #dbeafe;
  --color-inverse-primary: #1d4ed8;
  --color-primary-fixed: #bfdbfe;
  --color-primary-fixed-dim: #2563eb;
  --color-on-primary-fixed: #0f172a;
  --color-on-primary-fixed-variant: #1e3a8a;
  --color-surface-tint: #2563eb;

  /* Secondary */
  --color-secondary: #c8c6c5;
  --color-on-secondary: #313030;
  --color-secondary-container: #474746;
  --color-on-secondary-container: #b7b5b4;
  --color-secondary-fixed: #e5e2e1;
  --color-secondary-fixed-dim: #c8c6c5;
  --color-on-secondary-fixed: #1c1b1b;
  --color-on-secondary-fixed-variant: #474746;

  /* Tertiary */
  --color-tertiary: #ffeac0;
  --color-on-tertiary: #3e2e00;
  --color-tertiary-container: #fec931;
  --color-on-tertiary-container: #6f5500;
  --color-tertiary-fixed: #ffdf96;
  --color-tertiary-fixed-dim: #f3bf26;
  --color-on-tertiary-fixed: #251a00;
  --color-on-tertiary-fixed-variant: #594400;

  /* Error */
  --color-error: #ffb4ab;
  --color-on-error: #690005;
  --color-error-container: #93000a;
  --color-on-error-container: #ffdad6;

  /* Outline */
  --color-outline: #849396;
  --color-outline-variant: #3b494c;

  /* Typography */
  --font-display-lg: "Montserrat", sans-serif;
  --font-display-lg-mobile: "Montserrat", sans-serif;
  --font-headline-lg: "Montserrat", sans-serif;
  --font-headline-lg-mobile: "Montserrat", sans-serif;
  --font-headline-md: "Montserrat", sans-serif;
  --font-body-lg: "Inter", sans-serif;
  --font-body-md: "Inter", sans-serif;
  --font-label-md: "Inter", sans-serif;

  /* Font Sizes */
  --text-display-lg: 80px;
  --text-display-lg--line-height: 90px;
  --text-display-lg--letter-spacing: -0.02em;
  --text-display-lg--font-weight: 800;

  --text-display-lg-mobile: 48px;
  --text-display-lg-mobile--line-height: 56px;
  --text-display-lg-mobile--letter-spacing: -0.02em;
  --text-display-lg-mobile--font-weight: 800;

  --text-headline-lg: 48px;
  --text-headline-lg--line-height: 56px;
  --text-headline-lg--font-weight: 700;

  --text-headline-lg-mobile: 32px;
  --text-headline-lg-mobile--line-height: 40px;
  --text-headline-lg-mobile--font-weight: 700;

  --text-headline-md: 32px;
  --text-headline-md--line-height: 40px;
  --text-headline-md--font-weight: 700;

  --text-body-lg: 18px;
  --text-body-lg--line-height: 28px;
  --text-body-lg--font-weight: 400;

  --text-body-md: 16px;
  --text-body-md--line-height: 24px;
  --text-body-md--font-weight: 400;

  --text-label-md: 14px;
  --text-label-md--line-height: 20px;
  --text-label-md--letter-spacing: 0.05em;
  --text-label-md--font-weight: 600;

  /* Spacing */
  --spacing-container-max: 1280px;
  --spacing-gutter: 24px;
  --spacing-margin-mobile: 20px;
  --spacing-margin-desktop: 64px;
  --spacing-stack-sm: 8px;
  --spacing-stack-md: 16px;
  --spacing-stack-lg: 32px;
  --spacing-section-gap: 120px;
}

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

  ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-track {
    background: #0e0e0e;
  }
  ::-webkit-scrollbar-thumb {
    background: #333;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #444;
  }

  ::selection {
    background-color: var(--color-primary-container);
    color: var(--color-on-primary-container);
  }
}

@utility glass {
  background: rgba(25, 25, 25, 0.4);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@utility glass-light {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
}

@utility hover-lift {
  transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1), border-color 0.4s ease;

  &:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.3);
  }
}

@utility container-main {
  max-width: var(--spacing-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-margin-mobile);
  padding-right: var(--spacing-margin-mobile);

  @media (width >= theme(--breakpoint-md)) {
    padding-left: var(--spacing-margin-desktop);
    padding-right: var(--spacing-margin-desktop);
  }
}

@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@utility animate-marquee {
  animation: marquee-scroll 30s linear infinite;
}

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@utility animate-bounce-slow {
  animation: bounce-slow 2s ease-in-out infinite;
}
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1s cubic-bezier(0.16, 1, 0.3, 1);

  &.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-entrance {
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .animate-entrance {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].in-view {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
}