/* ============================================================
   BizPlay Design Tokens & Shared Styles
   Version: 1.0
   Last updated: 2026-02-20
   ============================================================ */

/* --- Light Mode Tokens (default) --- */
/* html:not(.dark) ensures light tokens win even when OS is dark mode */
html:not(.dark) {
  --bg-primary: #FAFAF9;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F4F4F2;
  --bg-hover: #F0EFED;
  --bg-selected: #FFF3ED;

  --text-primary: #1A1A1A;
  --text-secondary: #53565A;
  --text-tertiary: #97999B;

  --accent-primary: #FE5000;
  --accent-hover: #E54800;
  --accent-light: #FFF3ED;

  --success: #059669;
  --success-light: #ECFDF5;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --error: #DC2626;
  --error-light: #FEF2F2;
  --info: #2563EB;
  --info-light: #EFF6FF;

  --border-default: #E5E5E3;
  --border-strong: #D4D4D2;
  --border-subtle: #F0F0EE;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* :root fallback for pages that haven't toggled yet */
:root {
  --bg-primary: #FAFAF9;
  --bg-surface: #FFFFFF;
  --bg-surface-alt: #F4F4F2;
  --bg-hover: #F0EFED;
  --bg-selected: #FFF3ED;
  --text-primary: #1A1A1A;
  --text-secondary: #53565A;
  --text-tertiary: #97999B;
  --accent-primary: #FE5000;
  --accent-hover: #E54800;
  --accent-light: #FFF3ED;
  --success: #059669;
  --success-light: #ECFDF5;
  --warning: #D97706;
  --warning-light: #FFFBEB;
  --error: #DC2626;
  --error-light: #FEF2F2;
  --info: #2563EB;
  --info-light: #EFF6FF;
  --border-default: #E5E5E3;
  --border-strong: #D4D4D2;
  --border-subtle: #F0F0EE;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* --- Dark Mode Tokens — .dark class (JS toggle) --- */
.dark {
  --bg-primary: #111113;
  --bg-surface: #1A1A1E;
  --bg-surface-alt: #222226;
  --bg-hover: #2A2A2E;
  --bg-selected: #2D1A0E;

  --text-primary: #EBEBEB;
  --text-secondary: #A1A1A6;
  --text-tertiary: #6B6B70;

  --accent-primary: #FF6B1A;
  --accent-hover: #FF8040;
  --accent-light: #2D1A0E;

  --border-default: #2A2A2E;
  --border-strong: #3A3A3E;
  --border-subtle: #1F1F23;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* --- Base Typography --- */
body {
  font-family: 'DM Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: 'Space Grotesk', sans-serif;
}

/* --- Utility Classes --- */

/* Scrollbar hiding */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Animate-in (dropdown, modal) */
.animate-in {
  animation: dropIn 0.15s ease-out;
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Safe area for mobile bottom nav */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Sidebar (Desktop Dashboard) */
.sidebar { width: 240px; transition: width 0.25s ease; }
.sidebar.collapsed { width: 72px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .logo-text,
.sidebar.collapsed .user-info,
.sidebar.collapsed .section-divider-text { display: none; }
.sidebar.collapsed .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .logo-area { justify-content: center; padding: 16px 0; }
.sidebar.collapsed .user-footer { justify-content: center; }
.sidebar.collapsed .user-footer .user-details { display: none; }
.sidebar.collapsed .collapse-icon { transform: rotate(180deg); }
.main-content { margin-left: 240px; transition: margin-left 0.25s ease; }
.main-content.expanded { margin-left: 72px; }

/* ============================================================
   Dark Mode — CSS class overrides (.dark selector)
   Tailwind CDN dark: prefix OS media query kullandığı için
   burada .dark class ile tüm yüzey renkleri override edilir.
   html:not(.dark) ile light mode OS dark mode'dan korunur.
   ============================================================ */

/* Light mode: OS dark mode açık olsa bile token'ları koru */
html:not(.dark) .bg-white          { background-color: #FFFFFF !important; }
html:not(.dark) .bg-gray-50        { background-color: #F9FAFB !important; }
html:not(.dark) .bg-gray-100       { background-color: #F3F4F6 !important; }
html:not(.dark) input:not([type="range"]),
html:not(.dark) select,
html:not(.dark) textarea           { background-color: #FFFFFF !important; color: #1A1A1A !important; }

/* Dark mode: .dark class ile yüzeyleri koyu yap */
.dark .bg-white                    { background-color: #1A1A1E !important; }
.dark .bg-gray-50                  { background-color: #2A2A2E !important; }
.dark .bg-gray-100                 { background-color: #222226 !important; }

/* Borders */
html:not(.dark) .border-gray-100,
html:not(.dark) .border-gray-200   { border-color: #E5E5E3 !important; }
.dark .border-gray-100,
.dark .border-gray-200,
.dark .border-gray-300             { border-color: #2A2A2E !important; }

/* Inputs */
.dark input:not([type="range"]),
.dark select,
.dark textarea                     { background-color: #222226 !important; color: #EBEBEB !important; border-color: #2A2A2E !important; }
.dark input::placeholder,
.dark textarea::placeholder        { color: #6B6B70 !important; }

/* Dropdown/popup shadows */
html:not(.dark) .shadow-xl,
html:not(.dark) .shadow-elevated   { --tw-shadow-color: rgba(0,0,0,0.12); }
.dark .shadow-xl.bg-white,
.dark .shadow-elevated.bg-white    { background-color: #1A1A1E !important; }

/* Hover states */
html:not(.dark) .hover\:bg-gray-50:hover  { background-color: #F9FAFB !important; }
.dark .hover\:bg-white:hover,
.dark .hover\:bg-gray-50:hover            { background-color: #2A2A2E !important; }

/* Text */
html:not(.dark) .text-gray-900 { color: #111827 !important; }
html:not(.dark) .text-gray-700 { color: #374151 !important; }
.dark .text-gray-900           { color: #EBEBEB !important; }
.dark .text-gray-700           { color: #A1A1A6 !important; }
.dark .text-gray-600           { color: #A1A1A6 !important; }
.dark .text-gray-500           { color: #6B6B70 !important; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}