/**
 * ProRank SEO Global Styles
 *
 * Tailwind CSS v4 entry point with CSS-first configuration
 */

/* Tailwind v4 imports — skip preflight for WordPress admin compatibility */
@import "tailwindcss/theme" prefix(pr);
@import "tailwindcss/utilities" prefix(pr);

/* Import base styles */
@import url('./base/_icons.css');

/* Import design system variables */
@import url('./design-system.css');

/* Tailwind v4 CSS-first theme configuration (replaces tailwind.config.js) */
@theme {
  --color-primary-50: #fff7ed;
  --color-primary-100: #ffedd5;
  --color-primary-200: #fed7aa;
  --color-primary-300: #fdba74;
  --color-primary-400: #fb923c;
  --color-primary-500: #ff6900;
  --color-primary-600: #e55a00;
  --color-primary-700: #c2410c;
  --color-primary-800: #9a3412;
  --color-primary-900: #7c2d12;

  --color-success-50: #ecfdf3;
  --color-success-100: #d1fae5;
  --color-success-200: #a7f3d0;
  --color-success-300: #6ee7b7;
  --color-success-400: #34d399;
  --color-success-500: #10b981;
  --color-success-600: #059669;
  --color-success-700: #047857;
  --color-success-800: #065f46;
  --color-success-900: #064e3b;

  --color-warning-50: #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-300: #fcd34d;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-800: #92400e;
  --color-warning-900: #78350f;

  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #ef4444;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  --color-info-50: #eff6ff;
  --color-info-100: #dbeafe;
  --color-info-200: #bfdbfe;
  --color-info-300: #93c5fd;
  --color-info-400: #60a5fa;
  --color-info-500: #2563eb;
  --color-info-600: #1d4ed8;
  --color-info-700: #1e40af;
  --color-info-800: #1e3a8a;
  --color-info-900: #172554;
}

/* Border color compatibility: TW4 changes bare `border` default from gray-200 to currentColor */
@layer base {
  *,
  ::after,
  ::before {
    border-color: var(--color-gray-200, #e5e7eb);
  }
}

/* Content paths for Tailwind to scan (v4 CSS-first source config) */
@source "../../src/**/*.{js,jsx,ts,tsx}";
@source "../../includes/**/*.php";
@source "../../templates/**/*.php";

/* Global Reset for ProRank Admin Area */
@layer base {
  #prorank-seo-admin {
    /* Ensure consistent box-sizing */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Reset margins on common elements */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    figure,
    blockquote {
      margin: 0;
    }

    /* Consistent focus styles */
    *:focus-visible {
      outline: 2px solid var(--pr-color-primary-500, #3b82f6);
      outline-offset: 2px;
    }
  }
}

/* Component Classes */
@layer components {
  /* Module Card Component */
  .pr-module-card {
    @apply pr:bg-white pr:rounded-lg pr:shadow-md pr:p-6 pr:border pr:border-gray-200
           pr:hover:shadow-lg pr:transition-shadow pr:duration-200;
  }

  /* Button Variants */
  .pr-btn {
    @apply pr:inline-flex pr:items-center pr:justify-center pr:px-4 pr:py-2
           pr:text-sm pr:font-medium pr:rounded-md pr:transition-colors
           pr:duration-200 pr:focus:outline-hidden pr:focus:ring-2
           pr:focus:ring-offset-2 pr:disabled:opacity-50 pr:disabled:cursor-not-allowed;
  }

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

  .pr-btn-secondary {
    @apply pr-btn pr:bg-gray-200 pr:text-gray-900 pr:hover:bg-gray-300
           pr:focus:ring-gray-500;
  }

  /* Form Controls */
  .pr-input {
    @apply pr:block pr:w-full pr:rounded-md pr:border-gray-300 pr:shadow-xs
           pr:focus:ring-primary-500 pr:focus:border-primary-500 pr:text-sm;
  }

  .pr-label {
    @apply pr:block pr:text-sm pr:font-medium pr:text-gray-700 pr:mb-1;
  }

  /* Sidebar Shell */
  .pr-sidebar-shell {
    @apply pr:fixed pr:right-0 pr:top-0 pr:h-full pr:w-96 pr:bg-white
           pr:shadow-xl pr:transform pr:transition-transform pr:duration-300
           pr:ease-in-out pr:z-50;
  }

  .pr-sidebar-shell-enter {
    @apply pr:translate-x-full;
  }

  .pr-sidebar-shell-enter-active {
    @apply pr:translate-x-0;
  }
}

/* Utility Classes */
@layer utilities {
  /* Smooth Scrolling */
  .pr-scroll-smooth {
    scroll-behavior: smooth;
  }

  /* WordPress Admin Specific */
  .pr-wp-admin-offset {
    padding-top: 32px; /* WP Admin bar height */
  }

  /* Accessibility Utilities */
  .pr-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  .pr-not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  /* Animation Utilities */
  @media (prefers-reduced-motion: reduce) {
    .pr-animate-none {
      animation: none !important;
      transition: none !important;
    }
  }
}