/*
 * VNShortener shared design system
 * Phase 2 foundation — deliberately framework-free and progressively enhanced.
 */

:root {
  color-scheme: light;
  --vn-brand: #3157d5;
  --vn-brand-hover: #2748b8;
  --vn-brand-active: #203d9d;
  --vn-brand-soft: #eef2ff;
  --vn-signal: #0e9384;
  --vn-signal-hover: #08796d;
  --vn-signal-soft: #e7f8f4;
  --vn-ink: #172033;
  --vn-text: #354052;
  --vn-muted: #5f6b7a;
  --vn-canvas: #f6f8fb;
  --vn-paper: #fff;
  --vn-surface-muted: #f0f3f7;
  --vn-rule: #dde3ea;
  --vn-rule-strong: #c3ccd7;
  --vn-warning: #b65c13;
  --vn-warning-soft: #fff4e5;
  --vn-danger: #c93756;
  --vn-danger-hover: #a82c46;
  --vn-danger-soft: #fff0f3;
  --vn-info: #2563a8;
  --vn-info-soft: #edf6ff;
  --vn-overlay: rgb(10 18 33 / 58%);
  --vn-focus: rgb(49 87 213 / 28%);

  --vn-font-sans: "Plus Jakarta Sans", Inter, ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vn-font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --vn-text-xs: 0.75rem;
  --vn-text-sm: 0.875rem;
  --vn-text-base: 1rem;
  --vn-text-lg: 1.125rem;
  --vn-text-xl: 1.25rem;
  --vn-text-2xl: clamp(1.5rem, 3vw, 2rem);
  --vn-text-3xl: clamp(2rem, 4vw, 3rem);
  --vn-text-display: clamp(2.5rem, 6vw, 4.75rem);

  --vn-space-1: 0.25rem;
  --vn-space-2: 0.5rem;
  --vn-space-3: 0.75rem;
  --vn-space-4: 1rem;
  --vn-space-6: 1.5rem;
  --vn-space-8: 2rem;
  --vn-space-10: 2.5rem;
  --vn-space-12: 3rem;
  --vn-space-16: 4rem;
  --vn-space-20: 5rem;
  --vn-space-24: 6rem;

  --vn-radius-sm: 0.5rem;
  --vn-radius-control: 0.625rem;
  --vn-radius-card: 0.875rem;
  --vn-radius-frame: 1.125rem;
  --vn-radius-pill: 999px;

  --vn-shadow-xs: 0 1px 2px rgb(23 32 51 / 5%);
  --vn-shadow-sm: 0 8px 24px rgb(23 32 51 / 7%);
  --vn-shadow-md: 0 18px 42px rgb(23 32 51 / 12%);
  --vn-shadow-lg: 0 28px 70px rgb(23 32 51 / 18%);

  --vn-duration-fast: 150ms;
  --vn-duration: 200ms;
  --vn-duration-overlay: 240ms;
  --vn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --vn-container: 75rem;
  --vn-reading: 47.5rem;
  --vn-control: 2.75rem;
  --vn-control-compact: 2.5rem;
  --vn-control-large: 3.25rem;
}

[data-vn-theme="dark"] {
  color-scheme: dark;
  --vn-brand: #8da5ff;
  --vn-brand-hover: #adc0ff;
  --vn-brand-active: #cad5ff;
  --vn-brand-soft: #202b55;
  --vn-signal: #5dd7c8;
  --vn-signal-hover: #83e5d8;
  --vn-signal-soft: #143b39;
  --vn-ink: #f4f7fb;
  --vn-text: #d9e0e9;
  --vn-muted: #a5b0bf;
  --vn-canvas: #0e1523;
  --vn-paper: #151f30;
  --vn-surface-muted: #1d293b;
  --vn-rule: #344154;
  --vn-rule-strong: #4a596d;
  --vn-warning: #ffb763;
  --vn-warning-soft: #422b17;
  --vn-danger: #ff8198;
  --vn-danger-hover: #ffa4b4;
  --vn-danger-soft: #45202b;
  --vn-info: #8cc7ff;
  --vn-info-soft: #19314b;
  --vn-overlay: rgb(0 0 0 / 72%);
  --vn-focus: rgb(141 165 255 / 38%);
  --vn-shadow-xs: 0 1px 2px rgb(0 0 0 / 20%);
  --vn-shadow-sm: 0 8px 24px rgb(0 0 0 / 24%);
  --vn-shadow-md: 0 18px 42px rgb(0 0 0 / 32%);
  --vn-shadow-lg: 0 28px 70px rgb(0 0 0 / 42%);
}

.vn-ui,
.vn-ui *,
.vn-ui *::before,
.vn-ui *::after {
  box-sizing: border-box;
}

.vn-ui {
  margin: 0;
  background: var(--vn-canvas);
  color: var(--vn-text);
  font-family: var(--vn-font-sans);
  font-size: var(--vn-text-base);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.vn-ui h1,
.vn-ui h2,
.vn-ui h3,
.vn-ui p {
  margin-block-start: 0;
}

.vn-ui h1,
.vn-ui h2,
.vn-ui h3 {
  color: var(--vn-ink);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.vn-ui h1 { font-size: var(--vn-text-3xl); }
.vn-ui h2 { font-size: var(--vn-text-2xl); }
.vn-ui h3 { font-size: var(--vn-text-xl); }
.vn-ui a { color: var(--vn-brand); }
.vn-ui button,
.vn-ui input,
.vn-ui select,
.vn-ui textarea { font: inherit; }

.vn-ui :focus-visible {
  outline: 3px solid var(--vn-focus);
  outline-offset: 2px;
}

.vn-skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: var(--vn-space-3);
  inset-inline-start: var(--vn-space-3);
  translate: 0 -160%;
  border-radius: var(--vn-radius-control);
  background: var(--vn-ink);
  color: var(--vn-paper);
  padding: var(--vn-space-3) var(--vn-space-4);
}

.vn-skip-link:focus { translate: 0; }

.vn-container {
  width: min(100% - 2rem, var(--vn-container));
  margin-inline: auto;
}

.vn-container--reading { max-width: var(--vn-reading); }
.vn-stack { display: flex; flex-direction: column; gap: var(--vn-stack-gap, var(--vn-space-4)); }
.vn-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vn-cluster-gap, var(--vn-space-3)); }
.vn-grid { display: grid; gap: var(--vn-grid-gap, var(--vn-space-6)); }
.vn-grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.vn-mono { font-family: var(--vn-font-mono); font-variant-ligatures: none; }
.vn-muted { color: var(--vn-muted); }
.vn-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.vn-icon {
  width: var(--vn-icon-size, 1.25rem);
  height: var(--vn-icon-size, 1.25rem);
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vn-button {
  min-height: var(--vn-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vn-space-2);
  border: 1px solid transparent;
  border-radius: var(--vn-radius-control);
  padding: 0.625rem 1rem;
  background: var(--vn-brand);
  color: #fff;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--vn-shadow-xs);
  transition: background-color var(--vn-duration-fast) var(--vn-ease),
    border-color var(--vn-duration-fast) var(--vn-ease),
    box-shadow var(--vn-duration-fast) var(--vn-ease);
}

.vn-button:hover { background: var(--vn-brand-hover); color: #fff; }
.vn-button:active { background: var(--vn-brand-active); box-shadow: none; }
.vn-button--secondary { border-color: var(--vn-rule-strong); background: var(--vn-paper); color: var(--vn-ink); }
.vn-button--secondary:hover { border-color: var(--vn-brand); background: var(--vn-brand-soft); color: var(--vn-brand); }
.vn-button--quiet { background: transparent; color: var(--vn-text); box-shadow: none; }
.vn-button--quiet:hover { background: var(--vn-surface-muted); color: var(--vn-ink); }
.vn-button--danger { background: var(--vn-danger); }
.vn-button--danger:hover { background: var(--vn-danger-hover); }
.vn-button--small { min-height: var(--vn-control-compact); padding: 0.5rem 0.75rem; font-size: var(--vn-text-sm); }
.vn-button--large { min-height: var(--vn-control-large); padding-inline: 1.25rem; }
.vn-button--icon { width: var(--vn-control); padding-inline: 0; }
.vn-button--block { width: 100%; }
.vn-button[disabled],
.vn-button[aria-disabled="true"] { opacity: 0.52; cursor: not-allowed; pointer-events: none; }
.vn-button[aria-busy="true"]::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: vn-spin 700ms linear infinite;
}

.vn-field { display: grid; gap: var(--vn-space-2); }
.vn-label { color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 700; }
.vn-label__optional { color: var(--vn-muted); font-weight: 400; }
.vn-help,
.vn-error { margin: 0; font-size: var(--vn-text-sm); }
.vn-help { color: var(--vn-muted); }
.vn-error { color: var(--vn-danger); font-weight: 600; }
.vn-input,
.vn-select,
.vn-textarea {
  width: 100%;
  min-height: var(--vn-control);
  border: 1px solid var(--vn-rule-strong);
  border-radius: var(--vn-radius-control);
  background: var(--vn-paper);
  color: var(--vn-ink);
  padding: 0.625rem 0.75rem;
  transition: border-color var(--vn-duration-fast) var(--vn-ease),
    box-shadow var(--vn-duration-fast) var(--vn-ease);
}
.vn-input::placeholder,
.vn-textarea::placeholder { color: var(--vn-muted); opacity: 0.82; }
.vn-input:hover,
.vn-select:hover,
.vn-textarea:hover { border-color: var(--vn-muted); }
.vn-input:focus,
.vn-select:focus,
.vn-textarea:focus { border-color: var(--vn-brand); box-shadow: 0 0 0 3px var(--vn-focus); outline: none; }
.vn-input[aria-invalid="true"],
.vn-select[aria-invalid="true"],
.vn-textarea[aria-invalid="true"] { border-color: var(--vn-danger); }
.vn-textarea { min-height: 7rem; resize: vertical; }
.vn-input-group { display: flex; align-items: stretch; }
.vn-input-group > :first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.vn-input-group > :last-child { border-start-start-radius: 0; border-end-start-radius: 0; }
.vn-input-addon {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vn-rule-strong);
  background: var(--vn-surface-muted);
  color: var(--vn-muted);
  padding-inline: var(--vn-space-3);
}
.vn-check { display: inline-flex; align-items: flex-start; gap: var(--vn-space-2); color: var(--vn-text); cursor: pointer; }
.vn-check input { width: 1.125rem; height: 1.125rem; margin-block-start: 0.18rem; accent-color: var(--vn-brand); }

.vn-card {
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-xs);
}
.vn-card__header,
.vn-card__body,
.vn-card__footer { padding: var(--vn-space-4); }
.vn-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vn-space-4); }
.vn-card__header + .vn-card__body { padding-block-start: 0; }
.vn-card__footer { border-block-start: 1px solid var(--vn-rule); background: color-mix(in srgb, var(--vn-surface-muted) 58%, transparent); }
.vn-card__title { margin: 0; font-size: var(--vn-text-lg); }
.vn-metric { font-size: clamp(1.75rem, 5vw, 2.5rem); color: var(--vn-ink); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }

.vn-badge,
.vn-status {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: var(--vn-radius-pill);
  padding: 0.25rem 0.625rem;
  background: var(--vn-surface-muted);
  color: var(--vn-text);
  font-size: var(--vn-text-xs);
  font-weight: 700;
}
.vn-status::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: currentColor; }
.vn-status--success { background: var(--vn-signal-soft); color: var(--vn-signal); }
.vn-status--warning { background: var(--vn-warning-soft); color: var(--vn-warning); }
.vn-status--danger { background: var(--vn-danger-soft); color: var(--vn-danger); }
.vn-status--info { background: var(--vn-info-soft); color: var(--vn-info); }

.vn-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--vn-space-3);
  border: 1px solid color-mix(in srgb, var(--vn-info) 30%, var(--vn-rule));
  border-radius: var(--vn-radius-control);
  background: var(--vn-info-soft);
  color: var(--vn-text);
  padding: var(--vn-space-3) var(--vn-space-4);
}
.vn-alert--success { border-color: color-mix(in srgb, var(--vn-signal) 35%, var(--vn-rule)); background: var(--vn-signal-soft); }
.vn-alert--warning { border-color: color-mix(in srgb, var(--vn-warning) 35%, var(--vn-rule)); background: var(--vn-warning-soft); }
.vn-alert--danger { border-color: color-mix(in srgb, var(--vn-danger) 35%, var(--vn-rule)); background: var(--vn-danger-soft); }
.vn-alert__title { margin: 0; color: var(--vn-ink); font-size: var(--vn-text-sm); font-weight: 700; }
.vn-alert__message { margin: 0; font-size: var(--vn-text-sm); }

.vn-nav-list { display: grid; gap: var(--vn-space-1); margin: 0; padding: 0; list-style: none; }
.vn-nav-item {
  min-height: var(--vn-control);
  display: flex;
  align-items: center;
  gap: var(--vn-space-3);
  border-radius: var(--vn-radius-control);
  padding: 0.625rem 0.75rem;
  color: var(--vn-text);
  font-size: var(--vn-text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--vn-duration-fast) var(--vn-ease), color var(--vn-duration-fast) var(--vn-ease);
}
.vn-nav-item:hover { background: var(--vn-surface-muted); color: var(--vn-ink); }
.vn-nav-item[aria-current="page"] { background: var(--vn-brand-soft); color: var(--vn-brand); font-weight: 700; }

.vn-tabs { display: flex; gap: var(--vn-space-1); overflow-x: auto; border-block-end: 1px solid var(--vn-rule); }
.vn-tab {
  min-height: var(--vn-control);
  flex: 0 0 auto;
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--vn-muted);
  padding: 0.625rem var(--vn-space-3);
  font-weight: 700;
  cursor: pointer;
}
.vn-tab:hover { color: var(--vn-ink); }
.vn-tab[aria-selected="true"],
.vn-tab[aria-current="page"] { border-block-end-color: var(--vn-brand); color: var(--vn-brand); }

.vn-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--vn-rule); border-radius: var(--vn-radius-card); background: var(--vn-paper); }
.vn-table { width: 100%; border-collapse: collapse; color: var(--vn-text); font-size: var(--vn-text-sm); }
.vn-table th,
.vn-table td { padding: var(--vn-space-3) var(--vn-space-4); border-block-end: 1px solid var(--vn-rule); text-align: start; vertical-align: middle; }
.vn-table th { background: var(--vn-surface-muted); color: var(--vn-muted); font-size: var(--vn-text-xs); letter-spacing: 0.035em; text-transform: uppercase; }
.vn-table tbody tr:last-child td { border-block-end: 0; }
.vn-table tbody tr:hover { background: color-mix(in srgb, var(--vn-brand-soft) 45%, transparent); }

.vn-empty {
  display: grid;
  justify-items: center;
  gap: var(--vn-space-3);
  padding: var(--vn-space-12) var(--vn-space-6);
  text-align: center;
}
.vn-empty__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: var(--vn-radius-card); background: var(--vn-brand-soft); color: var(--vn-brand); }
.vn-empty__title { margin: 0; font-size: var(--vn-text-xl); }
.vn-empty__message { max-width: 30rem; margin: 0; color: var(--vn-muted); }

.vn-skeleton {
  min-height: 1rem;
  border-radius: var(--vn-radius-sm);
  background: linear-gradient(90deg, var(--vn-surface-muted) 25%, var(--vn-rule) 45%, var(--vn-surface-muted) 65%);
  background-size: 240% 100%;
  animation: vn-shimmer 1.4s linear infinite;
}

.vn-toast {
  width: min(calc(100vw - 2rem), 24rem);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--vn-space-3);
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-card);
  background: var(--vn-paper);
  color: var(--vn-text);
  padding: var(--vn-space-4);
  box-shadow: var(--vn-shadow-md);
}

.vn-backdrop { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; background: var(--vn-overlay); padding: var(--vn-space-4); }
.vn-dialog {
  width: min(100%, 32rem);
  max-height: min(90vh, 48rem);
  overflow: auto;
  border: 1px solid var(--vn-rule);
  border-radius: var(--vn-radius-frame);
  background: var(--vn-paper);
  box-shadow: var(--vn-shadow-lg);
}
.vn-dialog__header,
.vn-dialog__body,
.vn-dialog__footer { padding: var(--vn-space-6); }
.vn-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--vn-space-4); }
.vn-dialog__footer { display: flex; justify-content: flex-end; gap: var(--vn-space-3); border-block-start: 1px solid var(--vn-rule); }
.vn-drawer { position: fixed; z-index: 910; inset-block: 0; inset-inline-end: 0; width: min(100%, 30rem); overflow: auto; border-inline-start: 1px solid var(--vn-rule); background: var(--vn-paper); box-shadow: var(--vn-shadow-lg); }

.vn-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vn-space-1); }
.vn-page {
  min-width: var(--vn-control-compact);
  min-height: var(--vn-control-compact);
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--vn-radius-control);
  color: var(--vn-text);
  text-decoration: none;
}
.vn-page:hover { background: var(--vn-surface-muted); color: var(--vn-ink); }
.vn-page[aria-current="page"] { border-color: var(--vn-brand); background: var(--vn-brand-soft); color: var(--vn-brand); font-weight: 700; }

[data-vn-tooltip] { position: relative; }
[data-vn-tooltip]::after {
  content: attr(data-vn-tooltip);
  position: absolute;
  z-index: 100;
  inset-block-end: calc(100% + 0.5rem);
  inset-inline-start: 50%;
  width: max-content;
  max-width: 14rem;
  translate: -50% 0.25rem;
  border-radius: var(--vn-radius-sm);
  background: var(--vn-ink);
  color: var(--vn-paper);
  padding: 0.375rem 0.5rem;
  font-size: var(--vn-text-xs);
  line-height: 1.35;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vn-duration-fast) var(--vn-ease), translate var(--vn-duration-fast) var(--vn-ease);
}
[data-vn-tooltip]:hover::after,
[data-vn-tooltip]:focus-visible::after { opacity: 1; translate: -50% 0; }

@keyframes vn-spin { to { rotate: 1turn; } }
@keyframes vn-shimmer { to { background-position-x: -240%; } }

@media (min-width: 48rem) {
  .vn-container { width: min(100% - 3rem, var(--vn-container)); }
  .vn-card__header,
  .vn-card__body,
  .vn-card__footer { padding: var(--vn-space-6); }
  .vn-card__header + .vn-card__body { padding-block-start: 0; }
  .vn-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .vn-container { width: min(100% - 4rem, var(--vn-container)); }
  .vn-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 29.99rem) {
  .vn-button--mobile-block { width: 100%; }
  .vn-dialog__footer { flex-direction: column-reverse; }
  .vn-dialog__footer .vn-button { width: 100%; }
  .vn-alert { grid-template-columns: auto 1fr; }
  .vn-alert > :last-child { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .vn-ui *,
  .vn-ui *::before,
  .vn-ui *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .vn-ui { background: #fff; color: #000; }
  .vn-button,
  .vn-toast,
  .vn-backdrop,
  .vn-drawer { display: none !important; }
  .vn-card,
  .vn-table-wrap { box-shadow: none; break-inside: avoid; }
}