/* CloudBite platform styles. Layered on top of Tailwind.
   Only things Tailwind can't express cleanly live here. */

:root {
  --cb-brand:   #128DD9;
  --cb-brand2:  #0E7BC0;
  --cb-brand3:  #E8F4FB;
  --cb-ink:     #0B1220;
  --cb-ink2:    #38404D;
  --cb-muted:   #6B7480;
  --cb-line:    #E6E9EE;
  --cb-surface: #F7F9FC;
  --cb-bg:      #FFFFFF;
}

html, body { min-height: 100vh; }
body {
  font-feature-settings: "ss01", "cv11", "tnum";
  -webkit-tap-highlight-color: transparent;
}

/* Text rendering on retina */
.cb-display { letter-spacing: -0.02em; }

/* Accent rule — thin blue line used as section marker */
.cb-rule {
  display: inline-block;
  width: 32px;
  height: 2px;
  background: var(--cb-brand);
  border-radius: 2px;
}

/* Focus rings — accessible, brand-coloured */
*:focus-visible {
  outline: 2px solid var(--cb-brand);
  outline-offset: 3px;
  border-radius: 4px;
}
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Smooth nav underline hover */
.cb-nav-link {
  position: relative;
  transition: color .15s ease;
}
.cb-nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1.5px;
  background: var(--cb-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.cb-nav-link:hover::after, .cb-nav-link.active::after { transform: scaleX(1); }

/* Alpine x-cloak — hide un-hydrated state */
[x-cloak] { display: none !important; }

/* Toast entry */
@keyframes cbToastIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.cb-toast { animation: cbToastIn .25s ease-out; }

/* Skeleton shimmer */
@keyframes cbShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.cb-skeleton {
  background: linear-gradient(90deg, var(--cb-surface) 0%, #EEF2F7 50%, var(--cb-surface) 100%);
  background-size: 200% 100%;
  animation: cbShimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}

/* Light-mode scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cb-line); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #C9CFD6; }

::selection { background: rgba(18, 141, 217, 0.18); color: var(--cb-ink); }

/* Hide scrollbar utility */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Print */
@media print {
  .cb-no-print { display: none !important; }
  body { background: white; color: black; }
}