@import "tailwindcss";

@theme {
  /* Primary Black */
  --color-primary-900: oklch(0.15 0 0);
  --color-primary-800: oklch(0.2 0 0);
  --color-primary-700: oklch(0.25 0 0);
  --color-primary-600: oklch(0.3 0 0);
  --color-primary-500: oklch(0.35 0 0);

  /* Cream White */
  --color-cream-50: oklch(0.98 0.01 95);
  --color-cream-100: oklch(0.95 0.02 95);
  --color-cream-200: oklch(0.92 0.03 95);
  --color-cream-300: oklch(0.89 0.04 95);
  --color-cream-400: oklch(0.86 0.05 95);

  /* Shield Gold */
  --color-shield-50: oklch(0.9 0.08 75);
  --color-shield-100: oklch(0.85 0.1 75);
  --color-shield-200: oklch(0.8 0.12 75);
  --color-shield-300: oklch(0.75 0.14 75);
  --color-shield-400: oklch(0.7 0.16 75);

  --color-cool-50: oklch(0.98 0.01 240);
  --color-cool-100: oklch(0.95 0.02 240);
  --color-cool-200: oklch(0.92 0.03 240);
  --color-cool-300: oklch(0.89 0.04 240);
  --color-cool-400: oklch(0.86 0.05 240);

  /* Status Colors */
  --color-success: oklch(0.55 0.15 135); /* Green */
  --color-danger: oklch(0.55 0.25 25); /* Red */

  /* Link Colors */
  --color-link: oklch(0.65 0.2 280); /* Default link color */
  --color-link-hover: oklch(0.6 0.22 280); /* Light mode hover */
  --color-link-dark-hover: oklch(0.75 0.2 195); /* Dark mode hover (#24c8db) */
}

/* Base Resets */
html,
body {
  @apply w-screen h-screen m-0 p-0 overflow-x-hidden;
}

/* Typography */
:root {
  @apply font-sans text-base leading-normal antialiased 
         text-primary-900 bg-cream-50
         dark:text-cream-50 dark:bg-primary-800;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    sans-serif;
}

/* Layout */
.main-grid {
  @apply grid grid-cols-[200px_1fr] min-h-screen;
}

/* Navigation */
.nav-link {
  @apply block p-2 text-lg font-medium
         transition-colors duration-300
         
         /* Light mode */
         text-primary-900 hover:bg-cream-50
         
         /* Dark mode */  
         dark:text-cream-50 dark:hover:bg-primary-700;
}

.nav-link.active {
  @apply bg-white border-l-4 border-shield-200
         dark:bg-primary-700 dark:border-cream-100;
}

/* Links */
a {
  @apply font-medium text-[var(--color-link)] no-underline
         transition-colors duration-300;
}

a:hover {
  @apply text-[var(--color-link-hover)]
         dark:text-[var(--color-link-dark-hover)];
}

/* Form Elements */
input,
textarea,
select {
  @apply rounded-[var(--radius-brand)] border px-3 py-2
         font-medium transition-colors duration-300;

  /* Light mode */
  @apply border-cream-200 bg-white text-primary-900;

  /* Dark mode */
  @apply dark:border-primary-600 dark:bg-primary-700 
         dark:text-cream-50 dark:placeholder-cream-200;

  /* Focus states */
  @apply focus:outline-none focus:ring-2 focus:ring-shield-200
         dark:focus:ring-cream-200;
}

textarea {
  @apply w-full resize-y min-h-[100px];
}

/* Buttons */
button {
  @apply rounded-[var(--radius-brand)] border border-transparent
         px-4 py-2 font-medium cursor-pointer
         transition-all duration-300 shadow-sm
         bg-shield-200 text-primary-900
         hover:border-primary-700 active:bg-shield-300
         dark:bg-primary-700 dark:text-cream-50
         dark:active:bg-primary-600;
}

/* Button Variants */
.btn-primary {
  @apply bg-shield-200 text-primary-900
         hover:bg-shield-300
         dark:bg-cream-100 dark:text-primary-900
         dark:hover:bg-cream-200;
}

/* Success/Danger maintain good contrast in both modes */
.btn-success {
  @apply bg-[var(--color-success)] text-white
         hover:brightness-110 dark:hover:brightness-90;
}

.btn-danger {
  @apply bg-[var(--color-danger)] text-white
         hover:brightness-110 dark:hover:brightness-90;
}

/* Component Containers */
.component-container {
  @apply p-4 bg-white rounded-[var(--radius-brand)]
         border border-cream-100
         dark:bg-primary-800 dark:border-primary-700
         transition-all duration-300;
}

/* Utility Classes */
.grid-container {
  @apply flex flex-row gap-4 items-start;
}

.button-container {
  @apply flex flex-col gap-4 items-center;
}

/* Collapsible Components */
.Collapsible {
  @apply bg-cream-100 dark:bg-primary-700
         border-2 border-primary-900 dark:border-cream-50
         rounded-[var(--radius-brand)] text-left font-bold p-1;
}
