/*
 * Vantage brand layer for the Documenso signing experience.
 *
 * Injected by the Caddy proxy as a same-origin stylesheet (see
 * caddy/Dockerfile) — Documenso itself is stock, so upgrades never conflict.
 *
 * Strategy: Documenso is shadcn/Tailwind, so the heavy lifting is TOKEN
 * overrides (:root / .dark custom properties) — stable across their releases —
 * plus a small set of element-level refinements. Deliberately no selectors on
 * Tailwind utility soup or hashed class names; those break on every deploy.
 */

/* ── Brand tokens: Vantage blue replaces Documenso lime ──────────────────── */
:root {
  --primary: 211 100% 50%;
  --primary-foreground: 0 0% 100%;
  --ring: 211 100% 50%;
  --accent: 211 100% 96%;
  --accent-foreground: 211 100% 20%;
  --radius: 0.75rem;
}

.dark {
  --primary: 211 100% 55%;
  --primary-foreground: 0 0% 100%;
  --ring: 211 100% 55%;
  --accent: 211 100% 15%;
  --accent-foreground: 211 100% 85%;
}

/* ── Type: crisper rendering everywhere ──────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Buttons: confident primary, obvious press feedback ──────────────────── */
button {
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background-color 120ms ease,
    opacity 120ms ease;
}
button:active:not(:disabled) {
  transform: translateY(1px);
}
/* The primary action (Sign / Complete) gets weight and a lifted hover. */
button[class*='bg-primary'] {
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1), 0 4px 12px rgba(0, 128, 255, 0.22);
  font-weight: 600;
  letter-spacing: 0.01em;
}
button[class*='bg-primary']:hover:not(:disabled) {
  box-shadow: 0 2px 4px rgba(16, 24, 40, 0.12), 0 8px 20px rgba(0, 128, 255, 0.3);
}

/* ── Inputs: calm borders, unmistakable focus ────────────────────────────── */
input,
textarea,
select {
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 3px hsl(211 100% 50% / 0.18);
}

/* ── The signature pad: make THE moment feel deliberate ──────────────────── */
canvas {
  touch-action: none;
  border-radius: 0.5rem;
}
/* Documenso wraps the pad in a bordered card; soften and focus it. */
[class*='signature'] canvas,
canvas[class*='signature'] {
  background:
    linear-gradient(transparent calc(100% - 2.25rem), hsl(211 30% 60% / 0.25) calc(100% - 2.25rem), hsl(211 30% 60% / 0.25) calc(100% - 2.2rem), transparent calc(100% - 2.2rem));
  cursor: crosshair;
}

/* ── Document viewer: give the paper some presence ───────────────────────── */
/* react-pdf page canvases sit inside .react-pdf__Page — a stable library class. */
.react-pdf__Page,
.react-pdf__Page canvas {
  border-radius: 4px;
}
.react-pdf__Page {
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.12), 0 12px 32px rgba(16, 24, 40, 0.1);
}

/* ── Field placeholders on the document: inviting, not clinical ──────────── */
/* Documenso field buttons carry data attributes; hue-shift their idle tint. */
[data-field-type],
[data-field] {
  transition: box-shadow 120ms ease, background-color 120ms ease;
}
[data-field-type]:hover,
[data-field]:hover {
  box-shadow: 0 0 0 3px hsl(211 100% 50% / 0.25);
}

/* ── Dialogs: slightly deeper elevation so the sign modal owns the screen ── */
[role='dialog'] {
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.14), 0 24px 64px rgba(16, 24, 40, 0.22);
}

/* ── Mobile: the whole flow happens on phones at kitchen tables ──────────── */
@media (max-width: 640px) {
  /* Comfortable tap targets for the action row. */
  button {
    min-height: 2.75rem;
  }
  input,
  select,
  textarea {
    font-size: 16px; /* stops iOS zoom-on-focus */
  }
}

/* ── Reduced motion: respect it wholesale ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}