@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  /* Updated color palette to match Geezer Guide brand colors */
  --ink-blue: #3f5cea;
  --royal-blue: #09183d;
  --geezer-black: #000000;
  --geezer-white: #ffffff;

  /* Updated semantic colors to use Geezer Guide palette */
  --background: var(--geezer-white);
  --foreground: var(--geezer-black);
  --card: var(--geezer-white);
  --card-foreground: var(--geezer-black);
  --popover: var(--geezer-white);
  --popover-foreground: var(--geezer-black);
  --primary: var(--ink-blue);
  --primary-foreground: var(--geezer-white);
  --secondary: var(--royal-blue);
  --secondary-foreground: var(--geezer-white);
  --muted: #f8f9fa;
  --muted-foreground: #6c757d;
  --accent: var(--ink-blue);
  --accent-foreground: var(--geezer-white);
  --destructive: #dc3545;
  --destructive-foreground: var(--geezer-white);
  --border: #e9ecef;
  --input: #e9ecef;
  --ring: var(--ink-blue);
  --chart-1: var(--ink-blue);
  --chart-2: var(--royal-blue);
  --chart-3: #28a745;
  --chart-4: #ffc107;
  --chart-5: #dc3545;
  --radius: 0.625rem;
  --sidebar: var(--geezer-white);
  --sidebar-foreground: var(--geezer-black);
  --sidebar-primary: var(--ink-blue);
  --sidebar-primary-foreground: var(--geezer-white);
  --sidebar-accent: #f8f9fa;
  --sidebar-accent-foreground: var(--geezer-black);
  --sidebar-border: #e9ecef;
  --sidebar-ring: var(--ink-blue);
}

.dark {
  --background: var(--royal-blue);
  --foreground: var(--geezer-white);
  --card: var(--royal-blue);
  --card-foreground: var(--geezer-white);
  --popover: var(--royal-blue);
  --popover-foreground: var(--geezer-white);
  --primary: var(--ink-blue);
  --primary-foreground: var(--geezer-white);
  --secondary: #1a2332;
  --secondary-foreground: var(--geezer-white);
  --muted: #1a2332;
  --muted-foreground: #adb5bd;
  --accent: #1a2332;
  --accent-foreground: var(--geezer-white);
  --destructive: #dc3545;
  --destructive-foreground: var(--geezer-white);
  --border: #1a2332;
  --input: #1a2332;
  --ring: var(--ink-blue);
  --chart-1: var(--ink-blue);
  --chart-2: #4dabf7;
  --chart-3: #51cf66;
  --chart-4: #ffd43b;
  --chart-5: #ff6b6b;
  --sidebar: var(--royal-blue);
  --sidebar-foreground: var(--geezer-white);
  --sidebar-primary: var(--ink-blue);
  --sidebar-primary-foreground: var(--geezer-white);
  --sidebar-accent: #1a2332;
  --sidebar-accent-foreground: var(--geezer-white);
  --sidebar-border: #1a2332;
  --sidebar-ring: var(--ink-blue);
}

@theme inline {
  /* Updated font configuration for Geezer Guide custom typography */
  --font-sans: var(--font-montserrat), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-serif: var(--font-rockabilly), Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;

  /* Added custom Geezer Guide color utilities */
  --color-ink-blue: var(--ink-blue);
  --color-royal-blue: var(--royal-blue);
  --color-geezer-black: var(--geezer-black);
  --color-geezer-white: var(--geezer-white);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground text-lg;
    font-size: 20px;
    line-height: 1.6;
  }

  /* Custom animations for search page */
  @keyframes spin-slow {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .animate-spin-slow {
    animation: spin-slow 8s linear infinite;
  }

  @keyframes float {

    0%,
    100% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-20px);
    }
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  /* Added typography utilities for Geezer Guide custom fonts */
  .font-heading {
    font-family: var(--font-rockabilly), Georgia, "Times New Roman", serif;
    font-weight: 700;
  }

  .font-body {
    font-family: var(--font-montserrat), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }

  /* Additional font utilities for better font control */
  .font-primary {
    font-family: var(--font-rockabilly), Georgia, "Times New Roman", serif;
  }

  .font-secondary {
    font-family: var(--font-montserrat), -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  }

  /* Enhanced font size utilities for better readability */
  .text-base-lg {
    font-size: 22px;
    line-height: 1.6;
  }

  h1,
  .h1 {
    @apply text-4xl font-bold mb-4;
  }

  h2,
  .h2 {
    @apply text-3xl font-semibold mb-3;
  }

  h3,
  .h3 {
    @apply text-2xl font-semibold mb-2;
  }

  h4,
  .h4 {
    @apply text-xl font-semibold mb-2;
  }

  h5,
  .h5 {
    @apply text-lg font-semibold mb-1;
  }

  h6,
  .h6 {
    @apply text-base font-semibold mb-1;
  }

  p {
    @apply text-base;
  }

  /* Cursor pointer for all buttons and links */
  button:not(:disabled),
  a,
  [role="button"]:not([aria-disabled="true"]),
  input[type="button"]:not(:disabled),
  input[type="submit"]:not(:disabled),
  input[type="reset"]:not(:disabled),
  label[for] {
    cursor: pointer;
  }

  /* Disabled buttons should show not-allowed cursor */
  button:disabled,
  input[type="button"]:disabled,
  input[type="submit"]:disabled,
  input[type="reset"]:disabled,
  [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
  }

  /* Ensure interactive elements show pointer cursor on hover */
  button:not(:disabled):hover,
  a:hover,
  [role="button"]:not([aria-disabled="true"]):hover,
  input[type="button"]:not(:disabled):hover,
  input[type="submit"]:not(:disabled):hover,
  input[type="reset"]:not(:disabled):hover,
  label[for]:hover {
    cursor: pointer;
  }
}

/* Custom animations for micro-interactions */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

@keyframes shimmer-gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(63, 92, 234, 0.4);
  }

  50% {
    box-shadow: 0 0 0 10px rgba(63, 92, 234, 0);
  }
}


.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-shake {
  animation: shake 0.6s ease-in-out;
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite;
}

/* Ad Placement Type Select - Improved readability for selected and hovered states */
.ad-placement-item[data-state="checked"] .ad-placement-label,
.ad-placement-item[data-state="checked"][data-highlighted] .ad-placement-label {
  color: white;
}

.ad-placement-item:not([data-state="checked"]) .ad-placement-label {
  color: rgb(17, 24, 39); /* gray-900 */
}

.ad-placement-item[data-highlighted]:not([data-state="checked"]) .ad-placement-label {
  color: rgb(17, 24, 39); /* gray-900 */
}

.ad-placement-item[data-state="checked"] .ad-placement-dimensions,
.ad-placement-item[data-state="checked"][data-highlighted] .ad-placement-dimensions {
  color: rgb(219, 234, 254); /* blue-100 */
}

.ad-placement-item:not([data-state="checked"]) .ad-placement-dimensions {
  color: rgb(75, 85, 99); /* gray-600 */
}

.ad-placement-item[data-highlighted]:not([data-state="checked"]) .ad-placement-dimensions {
  color: rgb(55, 65, 81); /* gray-700 */
}