/**
 * Boost Content Admin - Main Styles
 *
 * @package Boost_Content
 * @license GPL-2.0-or-later
 */

@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap');

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

:root {
  /* Primary Colors */
  --bc-primary: #3BC2D0;
  --bc-primary-light: #E8F8FA;
  --bc-primary-dark: #2A9BA7;
  --bc-accent: #E32774;
  --bc-accent-light: #FCE8F0;
  --bc-accent-dark: #B81D5B;
  --bc-white: #FFFFFF;
  --bc-black: #000000;

  /* Gray Scale */
  --bc-gray-50: #F9FAFB;
  --bc-gray-100: #F3F4F6;
  --bc-gray-200: #E5E7EB;
  --bc-gray-300: #D1D5DB;
  --bc-gray-400: #9CA3AF;
  --bc-gray-500: #6B7280;
  --bc-gray-600: #4B5563;
  --bc-gray-700: #374151;
  --bc-gray-800: #1F2937;
  --bc-gray-900: #111827;

  /* Semantic */
  --bc-success: #10B981;
  --bc-warning: #F59E0B;
  --bc-error: #EF4444;
  --bc-info: #3B82F6;

  /* Spacing */
  --bc-radius-sm: 4px;
  --bc-radius: 8px;
  --bc-radius-md: 12px;
  --bc-radius-lg: 16px;
  --bc-radius-full: 9999px;
}

@layer base {
  html {
    font-family: 'Heebo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  }

  body {
    @apply text-bc-gray-800 bg-bc-gray-50;
  }

  /* RTL Support */
  [dir="rtl"] body,
  body.rtl {
    direction: rtl;
  }
}

@layer components {
  /* Focus visible */
  .bc-focus-visible:focus-visible {
    @apply outline-2 outline-offset-2 outline-bc-primary;
  }

  .bc-focus-visible:focus:not(:focus-visible) {
    @apply outline-none;
  }

  /* Custom scrollbar */
  .bc-scrollbar::-webkit-scrollbar {
    @apply w-2;
  }

  .bc-scrollbar::-webkit-scrollbar-track {
    @apply bg-bc-gray-100 rounded-full;
  }

  .bc-scrollbar::-webkit-scrollbar-thumb {
    @apply bg-bc-gray-300 rounded-full;
  }

  .bc-scrollbar::-webkit-scrollbar-thumb:hover {
    @apply bg-bc-gray-400;
  }
}