/*!
 * vs-modern.css — Varuna Sentinels modern UI layer (Phase 1)
 * Loaded immediately before </head> (last local stylesheet). Additive.
 * Removing the <link> reverts everything.
 *
 * Phase 1 deliberately establishes the design system primitives ONLY.
 * It does NOT restyle existing global classes (.card, .btn, .form-control,
 * .container) — those collide with custom.css and vs-animations.css. Visual
 * polish on existing pages happens in Phases 2–4 by applying the opt-in
 * `.vs-*` utility classes.
 *
 * Brand palette is preserved exactly:
 *   primary: #335596    accent: #74c5b5
 *   gradient: linear-gradient(135deg, #335596, #74c5b5)
 *
 * Note: custom.css already declares some --vs-* tokens (--vs-btn,
 * --vs-btn-hover, --vs-btn-active, --vs-btn-text near line 7762). The
 * tokens below do not collide by name; if either side adds new tokens,
 * coordinate.
 *
 * Sections:
 *   1. Tokens
 *   2. Base refinements (scroll, selection)
 *   3. Accessibility (skip link, focus-visible)
 *   4. Phase-3 opt-in utilities (.vs-card, .vs-card-stat, .vs-card-grid, .vs-btn-*-modern, .vs-form-modern)
 */

/* 1. Tokens */
:root {
  --vs-primary: #335596;
  --vs-accent:  #74c5b5;
  --vs-gradient: linear-gradient(135deg, #335596, #74c5b5);
  --vs-ink: #393636;
  --vs-muted: #6c757d;
  --vs-line: #eef2f7;

  --vs-radius-sm: 6px;
  --vs-radius-md: 12px;
  --vs-radius-lg: 16px;

  --vs-shadow-sm: 0 1px 2px rgba(51,85,150,.06), 0 1px 3px rgba(51,85,150,.08);
  --vs-shadow-md: 0 4px 12px rgba(51,85,150,.08), 0 2px 4px rgba(51,85,150,.06);
  --vs-shadow-lg: 0 12px 28px rgba(51,85,150,.14), 0 4px 8px rgba(51,85,150,.08);

  --vs-focus-ring: 0 0 0 3px rgba(51,85,150,.30);

  --vs-ease: cubic-bezier(.2,.7,.3,1);
  --vs-dur: 180ms;

  /* Spacing scale; forward-declared for Phase 3. */
  --vs-space-1: 4px;  --vs-space-2: 8px;  --vs-space-3: 12px; --vs-space-4: 16px;
  --vs-space-5: 24px; --vs-space-6: 32px; --vs-space-7: 48px; --vs-space-8: 64px;
}

/* 2. Base refinements */
html { scroll-behavior: smooth; }
::selection { background: rgba(116,197,181,.35); color: var(--vs-ink); }

/* 3. Accessibility */
.vs-skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--vs-primary); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--vs-radius-sm) 0;
  z-index: 10000; text-decoration: none; font-weight: 600;
}
.vs-skip-link:focus { left: 0; outline: none; }

/* focus-visible: keyboard-only ring. Excludes checkbox/radio so square
   inputs keep their native shape. No border-radius override. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--vs-focus-ring);
}

/* 4. Phase-3 opt-in utility classes (forward-declared; not applied in Phase 1) */
.vs-card {
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: var(--vs-space-5);
  box-shadow: var(--vs-shadow-sm);
  transition: box-shadow var(--vs-dur) var(--vs-ease),
              transform   var(--vs-dur) var(--vs-ease);
}
.vs-card:hover {
  box-shadow: var(--vs-shadow-md);
  transform: translateY(-2px);
}

.vs-card-stat {
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: var(--vs-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--vs-space-2);
}
.vs-card-stat__label {
  color: var(--vs-muted);
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
}
.vs-card-stat__value {
  color: var(--vs-primary);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: 'Poppins', sans-serif;
}
.vs-card-stat__delta { font-size: .8125rem; color: var(--vs-accent); }
.vs-card-stat__delta--down { color: #c0392b; }

.vs-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vs-space-4);
}
/* Tablet (>=768px): all multi-col grids show 2 columns. Desktop scales further. */
@media (min-width: 768px) {
  .vs-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .vs-card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .vs-card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .vs-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .vs-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.vs-btn-primary-modern {
  background: var(--vs-gradient);
  color: #fff;
  border: 0;
  border-radius: var(--vs-radius-sm);
  padding: 10px 20px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: box-shadow var(--vs-dur) var(--vs-ease),
              transform   var(--vs-dur) var(--vs-ease);
}
.vs-btn-primary-modern:hover {
  box-shadow: var(--vs-shadow-md);
  transform: translateY(-1px);
  color: #fff;
  text-decoration: none;
}
.vs-btn-primary-modern:active { transform: translateY(0); }

.vs-btn-secondary-modern {
  background: #fff;
  color: var(--vs-primary);
  border: 1px solid var(--vs-primary);
  border-radius: var(--vs-radius-sm);
  padding: 10px 20px;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background-color var(--vs-dur) var(--vs-ease),
              color            var(--vs-dur) var(--vs-ease);
}
.vs-btn-secondary-modern:hover {
  background: var(--vs-primary);
  color: #fff;
  text-decoration: none;
}

.vs-form-modern .form-control,
.vs-form-modern input[type="text"],
.vs-form-modern input[type="email"],
.vs-form-modern input[type="password"],
.vs-form-modern input[type="tel"],
.vs-form-modern input[type="number"],
.vs-form-modern textarea,
.vs-form-modern select {
  border: 1px solid var(--vs-line);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Poppins', sans-serif;
  transition: border-color var(--vs-dur) var(--vs-ease),
              box-shadow   var(--vs-dur) var(--vs-ease);
}
.vs-form-modern .form-control:focus,
.vs-form-modern input:focus,
.vs-form-modern textarea:focus,
.vs-form-modern select:focus {
  border-color: var(--vs-primary);
  box-shadow: var(--vs-focus-ring);
  outline: none;
}