/* ============================================================
   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; }

/* Right-docked slide-over (Asana-style task panel) */
@keyframes vp-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.vp-slide { animation: vp-slide-in 0.34s cubic-bezier(0.32, 0.72, 0, 1) both; }
.vp-scrim { animation: vp-fade 0.2s ease 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; }

/* Rich text (Markdown rendered via marked + DOMPurify) — used in task
   descriptions and comments. Tight, calm rhythm that fits card/panel density. */
.rt { font-size: 14px; line-height: 1.55; color: var(--ink-2); word-break: break-word; }
.rt > :first-child { margin-top: 0; }
.rt > :last-child { margin-bottom: 0; }
.rt p { margin: 0 0 8px; }
.rt h1, .rt h2, .rt h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.25; margin: 14px 0 6px; }
.rt h1 { font-size: 18px; } .rt h2 { font-size: 16px; } .rt h3 { font-size: 14.5px; }
.rt ul, .rt ol { margin: 4px 0 8px; padding-left: 20px; }
.rt li { margin: 2px 0; }
.rt a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.rt a:hover { color: var(--accent-ink); }
.rt strong { font-weight: 700; color: var(--ink); }
.rt mark { background: var(--accent-soft); color: var(--accent-ink); padding: 0 3px; border-radius: 3px; }
.rt blockquote { margin: 6px 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--line-2); color: var(--ink-3); }
.rt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.rt pre { background: var(--surface-2); padding: 10px 12px; border-radius: var(--r-sm); overflow-x: auto; }
.rt pre code { background: none; padding: 0; }
.rt hr { border: none; border-top: 1px solid var(--line); margin: 12px 0; }
.rt input[type=checkbox] { margin-right: 6px; }
.rt ul:has(input[type=checkbox]) { list-style: none; padding-left: 2px; }