@import "tailwindcss";
@plugin "daisyui";
@plugin "@tailwindcss/typography";

@plugin "daisyui/theme" {
  name: "site-theme";
  default: true;
  prefersdark: false;
  color-scheme: "light";
  --color-base-100: oklch(98% 0.001 106.423);
  --color-base-200: oklch(97% 0.001 106.424);
  --color-base-300: oklch(92% 0.003 48.717);
  --color-base-content: oklch(21% 0.006 56.043);

  /* UPDATED: Main Primary Color (Red) */
  --color-primary: oklch(62% 0.23 29.23); 
  --color-primary-content: oklch(100% 0 0);

  /* Replace these lines in your @plugin block */
  --color-secondary: oklch(60% 0.05 250); /* Slate/Blue-Grey */
  --color-secondary-content: oklch(99% 0.01 250);
  --color-accent: oklch(0% 0 0);
  --color-accent-content: oklch(98% 0.022 95.277);
  --color-neutral: oklch(21% 0.006 56.043);
  --color-neutral-content: oklch(98% 0.001 106.423);
  --color-info: oklch(54% 0.245 262.881);
  --color-info-content: oklch(97% 0.014 254.604);
  --color-success: oklch(59% 0.145 163.225);
  --color-success-content: oklch(97% 0.021 166.113);
  --color-warning: oklch(64% 0.222 41.116);
  --color-warning-content: oklch(98% 0.016 73.684);
  --color-error: oklch(57% 0.245 27.325);
  --color-error-content: oklch(97% 0.013 17.38);
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --size-selector: 0.25rem;
  --size-field: 0.25rem;
  --border: 1.5px;
  --depth: 1;
  --noise: 0;
}

@theme {
  /* UPDATED: Primary Palette 50-950 (Red Scale) */
  --color-primary-50: oklch(97% 0.014 29.23);
  --color-primary-100: oklch(93% 0.032 29.23);
  --color-primary-200: oklch(88% 0.06 29.23);
  --color-primary-300: oklch(82% 0.09 29.23);
  --color-primary-400: oklch(73% 0.14 29.23);
  --color-primary-500: oklch(62% 0.23 29.23);
  --color-primary-600: oklch(55% 0.23 29.23);
  --color-primary-700: oklch(49% 0.21 29.23);
  --color-primary-800: oklch(42% 0.17 29.23);
  --color-primary-900: oklch(37% 0.14 29.23);
  --color-primary-950: oklch(25% 0.09 29.23);

  /* Slate/Blue-Grey Scale anchored at 500 */
  --color-secondary-50: oklch(0.98 0.01 250);
  --color-secondary-100: oklch(0.95 0.015 250);
  --color-secondary-200: oklch(0.90 0.025 250);
  --color-secondary-300: oklch(0.80 0.035 250);
  --color-secondary-400: oklch(0.70 0.045 250);
  
  /* Your selected base color */
  --color-secondary-500: oklch(0.60 0.05 250);
  
  --color-secondary-600: oklch(0.50 0.05 250);
  --color-secondary-700: oklch(0.40 0.045 250);
  --color-secondary-800: oklch(0.30 0.04 250);
  --color-secondary-900: oklch(0.20 0.03 250);
  --color-secondary-950: oklch(0.12 0.02 250);
}

@layer components {
  .pagy {
      /* --- Main Customization Variables --- */
      --H: 0;   /* Hue: Set to 0 (or any value, as S=0 makes it irrelevant) */
      --S: 0%;  /* Saturation: Set to 0% for pure Black & White/Grayscale */
      --L: 50;  /* Lightness: Baseline */
      --spacing: 0.25rem;
      --padding: 0.875rem;
      --rounding: 0.625rem;
      --border-width: 1px;
      --font-size: 0.875rem;
      --font-weight: 500;
      --line-height: 1.5;

      /* --- Calculated Colors (Grayscale/B&W) --- */
      --text:               hsl(var(--H) 0% 15%); /* Dark Text (Near Black, L=15) */
      --text-hover:         hsl(var(--H) 0% 0%);  /* Pure Black Text on Hover */
      --text-current:       hsl(var(--H) 0% 100%); /* White for Current Text */
      --background:         hsl(var(--H) 0% 95%); /* Very Light Gray Background */
      --background-hover:   hsl(var(--H) 0% 80%); /* Slightly darker gray on hover */
      --background-current: hsl(var(--H) 0% 30%); /* Dark Gray Accent Color (The "Black") */
      --background-input:   hsl(var(--H) 0% 85%); /* Slightly darker than background for input field */

      /* --- Global Styling --- */
      @apply flex space-x-[var(--spacing)] font-[var(--font-weight)]
      text-[length:var(--font-size)] text-[var(--text)]
      leading-[var(--line-height)];

      a:not([role="separator"]) { /* all but gaps */
          @apply block rounded-[var(--rounding)] px-[var(--padding)] py-[calc(var(--padding)/4)] 
          bg-[var(--background)] border-solid border-[var(--background-hover)] 
          border-[length:var(--border-width)] transition-all duration-150 ease-in-out
          shadow-sm; /* Subtle Shadow */
      }

      a[href]:hover { /* all links on hover */
          @apply bg-[var(--background-hover)] text-[var(--text-hover)] shadow-md; /* Deeper shadow on hover */
      }

      a:not([href]) { /* all but links (e.g., disabled) */
          @apply cursor-default opacity-50; /* More standard disabled opacity */
      }

      a[aria-current] {  /* current page */
          @apply bg-[var(--background-current)] text-[var(--text-current)] 
          font-semibold shadow-md border-transparent; /* Stronger contrast and emphasis */
      }

      label {
          @apply inline-block whitespace-nowrap rounded-[var(--rounding)] px-[var(--padding)]
          py-[calc(var(--padding)/4-var(--border-width))]
          bg-[var(--background)] border-solid border-[length:var(--border-width)] border-[var(--background-hover)];

          input {
              @apply text-[var(--text)] text-[length:var(--font-size)] leading-[var(--line-height)] rounded-[calc(var(--rounding)/2)]
              font-[var(--font-weight)] bg-[var(--background-input)] border-[length:var(--border-width)] border-[var(--background-hover)]
              w-10 text-center; /* Added sizing and alignment for input */
          }
      }
  }

  .pulse {
    opacity: 0;
    transform-origin: center;
    animation: pulse-animation 2s infinite;
    @apply fill-primary-500;
  }

  @keyframes pulse-animation {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.42); /* Scales up to exactly 100px width */
      opacity: 0;
    }
  }

  .tab-active.tab-active-emphasis {
    @apply text-secondary;
  }
}

@import "./gallery.css";
@import "./tiny-slider.css";
@import "./swiper.css"