@import "./fonts.css";

@import "tailwindcss";

@theme {
  --font-display: 'Martian Grotesk', 'sans-serif';

  --clr-primary-chroma: 0.17;
  --clr-primary-hue: 121;

  --clr-secondary-chroma: 0.12;
  --clr-secondary-hue: 281;
}

@import "./theme.css";
@source "../../views";

@custom-variant dark (&:is(.dark *));

@theme {
  --color-primary: oklch(65% var(--clr-primary-chroma) var(--clr-primary-hue));

  --color-secondary: oklch(65% var(--clr-secondary-chroma) var(--clr-secondary-hue));

  /* Color versions */
  --color-primary-50: oklch(97% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-100: oklch(95% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-200: oklch(90% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-300: oklch(85% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-400: oklch(75% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-500: oklch(65% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-600: oklch(55% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-700: oklch(45% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-800: oklch(35% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-900: oklch(25% var(--clr-primary-chroma) var(--clr-primary-hue));
  --color-primary-950: oklch(15% var(--clr-primary-chroma) var(--clr-primary-hue));

  --color-secondary-50: oklch(97% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-100: oklch(95% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-200: oklch(90% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-300: oklch(85% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-400: oklch(75% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-500: oklch(65% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-600: oklch(55% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-700: oklch(45% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-800: oklch(35% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-900: oklch(25% var(--clr-secondary-chroma) var(--clr-secondary-hue));
  --color-secondary-950: oklch(15% var(--clr-secondary-chroma) var(--clr-secondary-hue));

  --color-cloud-50: oklch(100% 0 0); /* Pure white */
  --color-cloud-100: oklch(95% 0.0 0);
  --color-cloud-200: oklch(90% 0.0 0);
  --color-cloud-300: oklch(85% 0.0 0);
  --color-cloud-400: oklch(75% 0.0 0);
  --color-cloud-500: oklch(65% 0.0 0);
  --color-cloud-600: oklch(55% 0.0 0);
  --color-cloud-700: oklch(45% 0.0 0);
  --color-cloud-800: oklch(35% 0.0 0);
  --color-cloud-900: oklch(25% 0.0 0);
  --color-cloud-950: oklch(15% 0.0 0); /* dark grey */

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-medium: 0 4px 20px rgba(0, 0, 0, 0.08);
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }
}

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-6 py-3 rounded-md font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60 disabled:!cursor-not-allowed;
  }

  .btn-primary {
    @apply bg-primary-500 text-white hover:bg-primary-700 focus:ring-primary-600 disabled:bg-primary-500;
  }

  .btn-secondary {
    @apply bg-secondary-500 text-white hover:bg-secondary-700 focus:ring-secondary-600 disabled:bg-secondary-500;
  }

  .btn-outline {
    @apply border border-cloud-700 bg-white text-cloud-700 hover:bg-cloud-200 focus:ring-cloud-700 disabled:bg-white;
  }

  .input-field {
    @apply w-full px-4 py-2 border border-cloud-700 rounded-md focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:border-transparent;
  }

  .label {
    @apply block text-sm font-medium text-secondary-800 mb-1;
  }

  .card {
    @apply bg-cloud-50 rounded-lg shadow-soft p-3 sm:p-6;
  }

  .badge {
    @apply inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium;
  }

  .badge-submitted {
    @apply bg-secondary-800 text-cloud-50;
  }

  .badge-accepted {
    @apply bg-green-200 text-green-800;
  }

  .badge-rejected {
    @apply bg-red-100 text-red-800;
  }

  .badge-waitlist {
    @apply bg-orange-200 text-orange-700;
  }

  .badge-draft {
    @apply bg-cloud-100 text-cloud-700;
  }
}
