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

:root {
  --cm-primary: #3B82F6;
  --cm-primary-dark: #2563EB;
  --cm-accent: #6366F1;
  --cm-accent-dark: #4F46E5;
  --cm-bg: #FFFFFF;
  --cm-bg-subtle: #F3F4F6;
  --cm-text: #111827;
  --cm-text-secondary: #6B7280;
  --cm-success: #10B981;
  --cm-success-dark: #047857;
  --cm-warning: #F59E42;
  --cm-error: #EF4444;
  --cm-border: #E5E7EB;
}

.dark {
  --cm-primary: #2563EB;
  --cm-accent: #4F46E5;
  --cm-bg: #1F2937;
  --cm-bg-subtle: #111827;
  --cm-text: #F9FAFB;
  --cm-text-secondary: #D1D5DB;
  --cm-success: #047857;
  --cm-warning: #F59E42;
  --cm-error: #EF4444;
  --cm-border: #374151;
}

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.pagy {
  @apply flex space-x-1 font-semibold text-sm;
  color: var(--cm-text-secondary);
  a:not(.gap) {
    @apply block rounded-lg px-3 py-1;
    background-color: var(--cm-bg-subtle);
    color: var(--cm-text-secondary);
    &:hover {
      background-color: var(--cm-border);
    }
    &:not([href]) { /* disabled links */
      color: var(--cm-border);
      background-color: var(--cm-bg);
      cursor: default;
    }
    &.current {
      color: var(--cm-bg);
      background-color: var(--cm-text-secondary);
    }
  }
  label {
    @apply inline-block whitespace-nowrap rounded-lg px-3 py-0.5;
    background-color: var(--cm-bg-subtle);
    color: var(--cm-text-secondary);
    input {
      background-color: var(--cm-bg);
      border: none;
      border-radius: 0.375rem; /* matches rounded-md */
      color: var(--cm-text);
    }
  }
}
.flash__message {
  animation: appear-then-fade 4s both;
}

@keyframes appear-then-fade {
  0%,
  100% {
    opacity: 0;
  }
  5%,
  60% {
    opacity: 1;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */