/* Application styles */

/* ── VOX Brand Color Override: #0f172a ─────────────────────────── */
/* Tailwind v4 uses oklch CSS variables — override violet & indigo  */
:root, :host {
  /* Lightest tints — panel backgrounds (light navy-gray) */
  --color-violet-50:  oklch(97% 0.006 262);
  --color-violet-100: oklch(93% 0.012 262);
  --color-violet-200: oklch(86% 0.020 262);
  --color-violet-300: oklch(75% 0.030 262);
  --color-violet-400: oklch(55% 0.040 262);
  /* Primary action = #0f172a (slate-900 oklch) */
  --color-violet-500: oklch(22% 0.034 262);
  --color-violet-600: oklch(13% 0.028 262);
  --color-violet-700: oklch(9%  0.020 262);
  --color-violet-800: oklch(6%  0.014 262);
  --color-violet-900: oklch(4%  0.010 262);

  --color-indigo-50:  oklch(97% 0.006 262);
  --color-indigo-100: oklch(93% 0.012 262);
  --color-indigo-200: oklch(86% 0.020 262);
  --color-indigo-300: oklch(75% 0.030 262);
  --color-indigo-400: oklch(55% 0.040 262);
  --color-indigo-500: oklch(22% 0.034 262);
  --color-indigo-600: oklch(13% 0.028 262);
  --color-indigo-700: oklch(9%  0.020 262);
  --color-indigo-800: oklch(6%  0.014 262);
  --color-indigo-900: oklch(4%  0.010 262);

  /* blue-* → same navy palette */
  --color-blue-50:  #eef3f9; --color-blue-100: #d9e5f1;
  --color-blue-200: #b3cbe3; --color-blue-300: #7aaac9;
  --color-blue-400: #4a80a8; --color-blue-500: #2d5f8a;
  --color-blue-600: #1e3a5f; --color-blue-700: #162c47;
  --color-blue-800: #0e1e30; --color-blue-900: #070f18;
}

/* Hide Turbo Drive progress bar globally */
.turbo-progress-bar { display: none !important; }

/* All interactive elements should show pointer cursor */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
a[href],
label[for],
select,
[onclick] {
  cursor: pointer;
}

button:disabled,
[type="button"]:disabled,
[type="submit"]:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

/* Navy hover → white text: any element that turns navy on hover should have white text */
.hover\:bg-\[#1e3a5f\]:hover,
.hover\:bg-\[#1e3a5f\]:hover *,
.group:hover .group-hover\:text-white,
.group:hover .group-hover\:text-white * {
  color: #fff !important;
}