/* Bookeper AI — Custom Fider Theme v3
   Design System: Premium Playful (Warm Cream + Gold-Yellow)
   Fonts: Satoshi (headings) + DM Sans (body)
   Strategy: Override ALL dark-theme utility classes with light/brand values */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════
   1. FORCE LIGHT CSS VARIABLES ON DARK THEME
   ═══════════════════════════════════════════ */
html,
body[data-theme="dark"] {
  --colors-gray-50: #faf8f5 !important;
  --colors-gray-100: #f7f4ef !important;
  --colors-gray-200: #eeebe5 !important;
  --colors-gray-300: #e0dcd5 !important;
  --colors-gray-400: #d2cdc5 !important;
  --colors-gray-500: #b8b0a8 !important;
  --colors-gray-600: #8a8078 !important;
  --colors-gray-700: #6b6058 !important;
  --colors-gray-800: #4a3f38 !important;
  --colors-gray-900: #262225 !important;

  --colors-green-50: #f0fdf4 !important;
  --colors-green-100: #dcfce7 !important;
  --colors-green-200: #bbf7d0 !important;
  --colors-green-300: #86efac !important;
  --colors-green-400: #4ade80 !important;
  --colors-green-500: #22c55e !important;
  --colors-green-600: #16a34a !important;
  --colors-green-700: #15803d !important;
  --colors-green-800: #166534 !important;
  --colors-green-900: #14532d !important;

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

  --colors-blue-50: #f0f9ff !important;
  --colors-blue-100: #f2f2ff !important;
  --colors-blue-200: #c2c4ff !important;
  --colors-blue-300: #909bfd !important;
  --colors-blue-400: #5e76f7 !important;
  --colors-blue-500: #2d57ed !important;
  --colors-blue-600: #0f3ebb !important;
  --colors-blue-700: #03308a !important;
  --colors-blue-800: #002358 !important;
  --colors-blue-900: #001126 !important;

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

  --colors-white: #fff !important;
  --colors-black: #262225 !important;

  --primary-color: #d4a90a !important;
  --primary-color-dark: #b8920a !important;
  --primary-color-light: #ffe566 !important;
  --colors-primary-light: #ffe566 !important;
  --colors-primary-base: #d4a90a !important;
  --colors-primary-dark: #b8920a !important;
}

/* ═══════════════════════════════════════════
   2. OVERRIDE ALL DARK UTILITY CLASSES
   ═══════════════════════════════════════════ */

/* -- Backgrounds -- */
html,
body[data-theme="dark"] { background-color: #f7f4ef !important; color: #262225 !important; }
body[data-theme="dark"] .bg-white { background-color: #fff !important; }
body[data-theme="dark"] .bg-gray-50 { background-color: #faf8f5 !important; }
body[data-theme="dark"] .bg-gray-100 { background-color: #f7f4ef !important; }
body[data-theme="dark"] .hover\:bg-gray-100:hover { background-color: #f7f4ef !important; }
body[data-theme="dark"] .bg-gray-200 { background-color: #eeebe5 !important; }
body[data-theme="dark"] .hover\:bg-gray-200:hover { background-color: #eeebe5 !important; }
body[data-theme="dark"] .bg-green-100 { background-color: #dcfce7 !important; }
body[data-theme="dark"] .bg-green-300 { background-color: #86efac !important; }
body[data-theme="dark"] .bg-yellow-100 { background-color: #fef3c7 !important; }
body[data-theme="dark"] .bg-blue-50 { background-color: #f0f9ff !important; }
body[data-theme="dark"] .bg-blue-100 { background-color: #f2f2ff !important; }
body[data-theme="dark"] .hover\:bg-blue-200:hover { background-color: #c2c4ff !important; }
body[data-theme="dark"] .bg-red-100 { background-color: #fee2e2 !important; }

/* -- Primary colors (brand gold) -- */
body[data-theme="dark"] .bg-primary-light { background-color: #ffe566 !important; }
body[data-theme="dark"] .bg-primary-base { background-color: #FFD60A !important; }
body[data-theme="dark"] .bg-primary-dark { background-color: #b8920a !important; }
body[data-theme="dark"] .text-primary-base { color: #b8920a !important; }
body[data-theme="dark"] .hover\:text-primary-base:hover { color: #8a6d08 !important; }
body[data-theme="dark"] .border-primary-base { border-color: #d4a90a !important; }

/* -- Text colors -- */
body[data-theme="dark"] .text-gray-500 { color: #b8b0a8 !important; }
body[data-theme="dark"] .text-gray-600 { color: #8a8078 !important; }
body[data-theme="dark"] .text-gray-700 { color: #6b6058 !important; }
body[data-theme="dark"] .text-gray-800 { color: #4a3f38 !important; }
body[data-theme="dark"] .text-green-500 { color: #22c55e !important; }
body[data-theme="dark"] .text-green-600 { color: #16a34a !important; }
body[data-theme="dark"] .text-green-700 { color: #15803d !important; }
body[data-theme="dark"] .text-green-800 { color: #166534 !important; }
body[data-theme="dark"] .text-yellow-500 { color: #f59e0b !important; }
body[data-theme="dark"] .text-yellow-800 { color: #92400e !important; }
body[data-theme="dark"] .text-blue-600 { color: #0f3ebb !important; }
body[data-theme="dark"] .text-blue-700 { color: #03308a !important; }
body[data-theme="dark"] .text-red-500 { color: #ef4444 !important; }
body[data-theme="dark"] .text-red-700 { color: #b91c1c !important; }
body[data-theme="dark"] .text-red-800 { color: #991b1b !important; }

/* -- Borders -- */
body[data-theme="dark"] .border-gray-200 { border-color: #eeebe5 !important; }
body[data-theme="dark"] .border-gray-400 { border-color: #d2cdc5 !important; }
body[data-theme="dark"] .border-gray-800 { border-color: #4a3f38 !important; }
body[data-theme="dark"] .border-green-400 { border-color: #4ade80 !important; }
body[data-theme="dark"] .border-green-500 { border-color: #22c55e !important; }
body[data-theme="dark"] .border-yellow-400 { border-color: #fbbf24 !important; }
body[data-theme="dark"] .border-blue-200 { border-color: #c2c4ff !important; }
body[data-theme="dark"] .border-blue-400 { border-color: #5e76f7 !important; }
body[data-theme="dark"] .border-blue-500 { border-color: #2d57ed !important; }
body[data-theme="dark"] .border-blue-600 { border-color: #0f3ebb !important; }
body[data-theme="dark"] .border-red-300 { border-color: #fca5a5 !important; }

/* ═══════════════════════════════════════════
   3. GENERAL TEXT COLOR CATCH-ALL
   ═══════════════════════════════════════════ */
body[data-theme="dark"],
body[data-theme="dark"] p,
body[data-theme="dark"] span,
body[data-theme="dark"] div,
body[data-theme="dark"] label,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6,
body[data-theme="dark"] li,
body[data-theme="dark"] a { color: #262225; }

/* ═══════════════════════════════════════════
   4. TYPOGRAPHY
   ═══════════════════════════════════════════ */
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.text-display, .text-display2, .text-title {
  font-family: 'Satoshi', 'DM Sans', sans-serif !important;
  font-weight: 700;
}

/* ═══════════════════════════════════════════
   5. BRAND POLISH
   ═══════════════════════════════════════════ */

/* Rounded corners */
.c-vote-counter,
.c-tag-item,
.c-modal-window {
  border-radius: 12px !important;
}

.c-button {
  border-radius: 10px !important;
}

/* Primary buttons → gold */
.c-button.bg-primary-base,
.c-button.hover\:bg-primary-dark:hover {
  background-color: #FFD60A !important;
  border-color: #FFD60A !important;
  color: #262225 !important;
  font-weight: 600;
}

/* Links → gold */
a:not(.c-button) { color: #b8920a !important; }
a:not(.c-button):hover { color: #8a6d08 !important; }

/* Card shadows */
.c-list-item,
[class*="shadow"] {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

/* Header logo */
.c-menu img { max-height: 36px; }

/* ═══════════════════════════════════════════
   6. HIDE FIDER BRANDING & THEME TOGGLE
   ═══════════════════════════════════════════ */
.c-powered { display: none !important; }

/* Hide theme toggle to prevent confusion */
button[title*="theme" i],
button[title*="Theme"],
[data-theme-toggle] { display: none !important; }