/* tokens.css — har rang, har naap, har chhaya ek hi jagah se.
 *
 * 13 September 2026. Maalik ne kaha design "basic" banta hai. Uski sabse
 * badi wajah yeh thi ki har panne me rang seedha likhe jaate the — kahin
 * #1e3a8a, kahin #2563eb, kahin "blue". Ek hi jagah se aane par poori site
 * ek jaisi lagti hai, aur badalna ek line ka kaam ho jaata hai.
 *
 * NIYAM: panne me kabhi seedha hex mat likhna. Yahan se var() uthao.
 *
 * Istemaal:
 *   static site  — build me <link> ya inline
 *   Vision Desk  — ui.html ke <style> me sabse upar
 *   Next apps    — globals.css me @import, ya tailwind-preset.js ke through
 */

:root {
  /* ── Rang ── sab HSL me, kyunki halka/gehra banana ek number ka kaam ho */
  --ink:        hsl(222 47% 11%);   /* mukhya text — kaala NAHI */
  --ink-soft:   hsl(215 20% 42%);   /* doosra darja */
  --ink-faint:  hsl(215 16% 62%);   /* teesra darja, label */
  --bg:         hsl(210 40% 99%);   /* maidan — poora safed NAHI */
  --bg-sunk:    hsl(210 40% 96%);   /* dhansa hua hissa */
  --card:       hsl(0 0% 100%);
  --line:       hsl(214 32% 91% / .7);
  --line-solid: hsl(214 32% 88%);

  /* Har dhandhe ka apna — ek hi palette sab par chipkani nahi hai */
  --brand:      hsl(217 78% 24%);   /* Vision Analytical */
  --brand-2:    hsl(221 83% 33%);
  --accent:     hsl(217 91% 60%);
  --accent-ink: hsl(0 0% 100%);

  --ok:    hsl(160 84% 30%);
  --warn:  hsl(38 92% 42%);
  --stop:  hsl(0 72% 45%);

  /* ── Jagah ── ek hi 4px ki seedhi par */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  /* ── Kone ── */
  --r-sm: 8px;  --r: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-full: 9999px;

  /* ── Chhaya ── kai halki parat, ek moti kaali nahi */
  --shadow-sm: 0 1px 2px hsl(222 47% 11% / .06);
  --shadow-md: 0 4px 12px hsl(222 47% 11% / .08), 0 1px 3px hsl(222 47% 11% / .06);
  --shadow-lg: 0 12px 28px hsl(222 47% 11% / .10), 0 2px 6px hsl(222 47% 11% / .06);
  --shadow-xl: 0 24px 48px hsl(222 47% 11% / .12), 0 2px 8px hsl(222 47% 11% / .06);

  /* ── Halchal ── 300ms se zyada kabhi nahi */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --fast: .15s;  --mid: .3s;

  /* ── Type ── */
  --font-head: "Syne", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body: "Space Grotesk", "Inter", system-ui, sans-serif;
  --lh-tight: 1.15;  --lh: 1.65;
  --measure: 68ch;                  /* padhne layak chaudai ki hadd */
}

/* Style Hub — garm, chamakdaar */
[data-brand="stylehub"] {
  --brand: hsl(347 77% 40%);  --brand-2: hsl(347 77% 50%);
  --accent: hsl(347 91% 60%);
}
/* BharatStay — khula, mehmaan-nawaz */
[data-brand="bharatstay"] {
  --brand: hsl(160 84% 25%);  --brand-2: hsl(160 84% 32%);
  --accent: hsl(160 84% 40%);
}
/* Vision Desk — saaf, kaam ka */
[data-brand="desk"] {
  --brand: hsl(221 83% 53%);  --brand-2: hsl(221 83% 45%);
  --accent: hsl(221 91% 60%);
}

/* ── Raat ka roop ──
 * Sirf tokens badalte hain, ek bhi component nahi. Yahi is dhanche ka
 * poora faayda hai. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:       hsl(210 40% 96%);
    --ink-soft:  hsl(215 20% 70%);
    --ink-faint: hsl(215 16% 52%);
    --bg:        hsl(222 47% 8%);
    --bg-sunk:   hsl(222 47% 6%);
    --card:      hsl(222 40% 12%);
    --line:      hsl(215 25% 30% / .7);
    --line-solid: hsl(215 25% 26%);
    --shadow-sm: 0 1px 2px hsl(0 0% 0% / .3);
    --shadow-md: 0 4px 12px hsl(0 0% 0% / .35), 0 1px 3px hsl(0 0% 0% / .3);
    --shadow-lg: 0 12px 28px hsl(0 0% 0% / .4), 0 2px 6px hsl(0 0% 0% / .3);
    --shadow-xl: 0 24px 48px hsl(0 0% 0% / .45), 0 2px 8px hsl(0 0% 0% / .3);
  }
}

/* ── Sabki pahunch — yeh hamesha rakhna ──
 * Jinhe halchal se takleef hoti hai unke liye. Yeh choti si baat hai par
 * ise chhod dena ek asli galti hai. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Kuch cheezein jo har panne par ek jaisi honi chahiye ── */
.va-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--s-5);
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) var(--ease);
}
.va-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.va-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r); border: 1px solid transparent;
  font: 600 15px/1 var(--font-body);
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease), box-shadow var(--mid) var(--ease),
              filter var(--fast) var(--ease);
}
.va-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.06); }
.va-btn:active { transform: translateY(0); }
.va-btn--soft {
  background: var(--bg-sunk); color: var(--ink); border-color: var(--line);
}
/* Keyboard se chalne walon ke liye — dikhna CHAHIYE */
.va-btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Khaali dabba kabhi mat chhodna — yeh uski shakl hai */
.va-khaali {
  text-align: center; padding: var(--s-8) var(--s-5);
  color: var(--ink-soft); border: 1px dashed var(--line-solid);
  border-radius: var(--r-lg); background: var(--bg-sunk);
}