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

/* AG Brand Fonts - Objektiv Mk1 (Primary - Headlines) */
@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Objektiv Mk1';
  src: url('/fonts/ObjektivMk1-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* AG Brand Fonts - Proxima Sera (Secondary - Body Copy) */
@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Proxima Sera';
  src: url('/fonts/ProximaSera-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Primary - Red Earth */
  --ag-orange: #DB5223;
  --ag-orange-75: #E37D56;
  --ag-orange-50: #EDA791;
  --ag-orange-25: #F6D3C8;

  /* Secondary - Blue Adventure */
  --ag-blue: #017085;
  --ag-blue-75: #408C9D;
  --ag-blue-50: #80A8B6;
  --ag-blue-25: #BFD4DA;

  /* Secondary - Green Travel */
  --ag-green: #507D4B;
  --ag-green-75: #7C9D78;
  --ag-green-50: #A7BEA5;
  --ag-green-25: #D3DED2;

  /* Neutrals */
  --ag-black: #000000;
  --ag-white: #FFFFFF;

  /* Legacy */
  --ag-gold: #B8860B;
  --guardian-green: #507D4B;
}

@layer base {
  body {
    @apply text-gray-900;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-semibold tracking-tight;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-lg bg-ag-orange px-6 py-3 text-sm font-semibold text-white transition-colors focus:outline-none focus:ring-2 focus:ring-ag-orange focus:ring-offset-2;
  }
  .btn-primary:hover {
    background-color: var(--ag-orange-dark);
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-6 py-3 text-sm font-semibold text-gray-700 transition-colors hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2;
  }

  .card {
    @apply rounded-xl bg-white shadow-lg ring-1 ring-gray-100;
  }

  .input {
    @apply block w-full rounded-lg border border-gray-300 px-4 py-3 text-sm placeholder-gray-400 focus:border-ag-orange focus:outline-none focus:ring-2 focus:ring-ag-orange/20;
  }
}

/* Video background for hero */
.video-background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Course card hover effects */
.course-card {
  @apply transition-all duration-300;
}

.course-card:hover {
  @apply -translate-y-1 shadow-xl;
}

/* Progress indicator */
.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring circle {
  transition: stroke-dashoffset 0.5s ease-in-out;
}

/* 404 kangaroo - flipped to point right, with space on right for visual centering */
.error-kangaroo {
  width: 142px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transform: rotateY(180deg);
}