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

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

:root {
  /* Surfaces — zinc neutrals */
  --bg: #fafafa;
  --bg-card: #ffffff;
  --bg-subtle: #f4f4f5;
  --bg-hover: #f4f4f5;

  /* Text */
  --ink: #18181b;
  --ink-soft: #52525b;
  --ink-muted: #a1a1aa;

  /* Borders */
  --line: #e4e4e7;
  --line-soft: #f4f4f5;

  /* Brand — calm blue */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-ring: rgba(37, 99, 235, 0.18);

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-md: 0 4px 12px -2px rgba(24, 24, 27, 0.06), 0 2px 4px -1px rgba(24, 24, 27, 0.04);
}

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Modern date/time input styling */
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.5;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: opacity 0.15s, background 0.15s;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background: var(--bg-subtle);
}

input[type="date"]::-webkit-inner-spin-button,
input[type="datetime-local"]::-webkit-inner-spin-button {
  display: none;
}

