/* =========================================================
   css/main.css - Design Tokens, Typography & Global Resets
   ========================================================= */

:root {
  /* Color Palette */
  --primary: #0077ff;
  --primary-hover: #0066cc;
  --surface-bg: #fafafc;
  --surface-card: #ffffff;
  --page-bg: #f0f2f5;
  --text-title: #000000;
  --text-subtitle: #666666;
  --success: #34c759;
  --warning: #ff9500;
  --danger: #ff3b30;
  --danger-hover: #e6352b;

  /* Typography */
  --font-main: 'Plus Jakarta Sans', 'Outfit', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Borders & Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-card: 0 20px 60px -15px rgba(0, 0, 0, 0.1);
  --shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.04);
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: var(--page-bg);
  font-family: var(--font-main);
  color: var(--text-title);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* Fallback Color Utilities */
.bg-primary { background-color: var(--primary) !important; }
.hover\:bg-primary-hover:hover { background-color: var(--primary-hover) !important; }
.text-primary { color: var(--primary) !important; }
.border-primary { border-color: var(--primary) !important; }
.border-primary\/30 { border-color: rgba(0, 119, 255, 0.3) !important; }
.border-primary\/20 { border-color: rgba(0, 119, 255, 0.2) !important; }
.bg-primary\/10 { background-color: rgba(0, 119, 255, 0.1) !important; }
.bg-primary\/20 { background-color: rgba(0, 119, 255, 0.2) !important; }
.bg-surface-bg { background-color: var(--surface-bg) !important; }
.bg-surface-card { background-color: var(--surface-card) !important; }
.bg-page-bg { background-color: var(--page-bg) !important; }
.text-text-title { color: var(--text-title) !important; }
.text-text-subtitle { color: var(--text-subtitle) !important; }
.bg-success { background-color: var(--success) !important; }
.bg-warning { background-color: var(--warning) !important; }
.hidden { display: none !important; }

.active-week-day {
  border: 2px solid #0077ff !important;
  background-color: #ffffff !important;
}

/* Scrollbar Utilites */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Date input alignments */
input[type="date"].text-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

input[type="date"].text-center::-webkit-datetime-edit {
  display: flex;
  justify-content: center;
  padding-left: 0;
}

input[type="date"].text-center::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

input[type="date"].date-input-overlay::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}