/* ============================================================
   Vacation Planner — design tokens & base styles
   Aesthetic: calm editorial productivity. Warm paper canvas,
   clay accent, characterful display type.
   ============================================================ */

:root {
  /* Surfaces — cool, clean (Mesper) */
  --paper: #EEF1F8;
  --paper-2: #E3E8F2;
  --surface: #FFFFFF;
  --surface-2: #F6F8FC;

  /* Ink — slate navy */
  --ink: #1A2138;
  --ink-2: #3C455F;
  --ink-3: #7F89A2;   /* Mesper Slate Gray */
  --ink-4: #6F7582;   /* darkened for WCAG AA on light surfaces */

  /* Hairlines */
  --line: #E4E8F1;
  --line-2: #D5DBE8;
  --line-strong: #C2CADB;

  /* Brand accent — Royal Blue (overridable by tweaks) */
  --accent: #5A58E7;
  --accent-ink: #4340C4;
  --accent-soft: #E7E7FB;
  --accent-contrast: #FFFFFF;

  /* Leave-type accents — mapped to Mesper palette */
  --t-vacation: #5A58E7;            /* Royal Blue */
  --t-vacation-soft: #E7E7FB;
  --t-home: #266BB0;                /* Sky Blue, darkened for AA text on soft bg */
  --t-home-soft: #DEEBFE;
  --t-sick: #E5484D;                /* semantic red */
  --t-sick-soft: #FCE3E4;
  --t-half: #866B00;                /* Golden Yellow, darkened for AA text on soft bg */
  --t-half-soft: #FFF3C4;
  --t-special: #7D50CA;             /* Amethyst Purple */
  --t-special-soft: #ECE1F8;

  /* Status */
  --st-approved: #237946;
  --st-approved-soft: #DAF1E3;
  --st-pending: #9A7B0A;
  --st-pending-soft: #FBF0C4;
  --st-declined: #E5484D;
  --st-declined-soft: #FCE3E4;

  /* Type */
  --font-display: "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;

  /* Radius */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 13px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* Shadows — cool navy tint */
  --sh-sm: 0 1px 2px rgba(26, 33, 56, 0.06), 0 1px 1px rgba(26, 33, 56, 0.04);
  --sh-md: 0 2px 6px rgba(26, 33, 56, 0.07), 0 6px 18px rgba(26, 33, 56, 0.08);
  --sh-lg: 0 8px 28px rgba(26, 33, 56, 0.11), 0 20px 48px rgba(26, 33, 56, 0.11);
  --sh-pop: 0 12px 40px rgba(26, 33, 56, 0.18);

  /* Density (overridable) */
  --gap: 20px;
  --pad-card: 22px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 15px;
  line-height: 1.5;
}

#root { height: 100%; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ink);
  line-height: 1.1;
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--accent-ink); }

/* Scrollbar */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }
*::-webkit-scrollbar-track { background: transparent; }

/* Utility animations.
   NOTE: layout reveals (vp-fade-up) must NOT start at opacity:0 — browsers pause
   CSS animations at frame 0 whenever the tab/preview is backgrounded, which would
   leave main content invisible. So vp-fade-up animates transform only (always
   visible). Opacity fades are reserved for user-triggered, always-focused elements
   (modals, dropdowns, toasts). */
@keyframes vp-fade-up {
  from { transform: translateY(12px); }
  to { transform: translateY(0); }
}
@keyframes vp-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes vp-pop {
  0% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.vp-fade-up { animation: vp-fade-up 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.vp-fade { animation: vp-fade 0.4s ease both; }
.vp-pop { animation: vp-pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

/* Focus ring */
.vp-focusable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Hide native number spinners */
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }