/**
 * Main Stylesheet
 * Global styles, CSS variables, and reset
 */

:root {
  /* Color Palette */
  --primary: #0f172a;
  --primary-soft: #334155;
  --accent: #ef4444;
  --success: #10b981;
  --info: #3b82f6;
  --warning: #f59e0b;
  --preop: #7c3aed;

  /* Background & Surfaces */
  --bg-body: #f1f5f9;
  --bg-card: #ffffff;
  --border-color: #e2e8f0;

  /* Text */
  --text-main: #334155;
  --text-light: #64748b;

  /* Layout */
  --radius: 10px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Task Status Colors */
  --task-today-bg: #fef2f2;
  --task-today-border: #fecaca;
  --task-today-text: #b91c1c;

  --task-tmm-bg: #eff6ff;
  --task-tmm-border: #bfdbfe;
  --task-tmm-text: #1d4ed8;

  --task-future-bg: #f8fafc;
  --task-future-border: #e2e8f0;
  --task-future-text: #64748b;

  --task-done-bg: #f0fdf4;
  --task-done-border: #bbf7d0;
  --task-done-text: #15803d;
}

/* Reset & Base */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  background-color: var(--bg-body);
  background-image: radial-gradient(
      at 0% 0%,
      rgba(124, 58, 237, 0.03) 0px,
      transparent 50%
    ),
    radial-gradient(at 100% 100%, rgba(59, 130, 246, 0.03) 0px, transparent 50%);
  color: var(--text-main);
  margin: 0;
  padding: 20px;
  padding-bottom: 100px;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 950px;
  margin: 0 auto;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  body {
    padding: 12px;
    padding-bottom: 80px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  body {
    padding: 8px;
    padding-bottom: 70px;
    font-size: 12.5px;
  }
}

/* Animations */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}