index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* a11y — keyboard focus ring. Many buttons ship `focus:outline-none` with no
   replacement, making keyboard navigation invisible; this restores a visible
   ring for keyboard users only (:focus-visible, not on mouse click). !important
   is deliberate so it wins over the per-component outline-none. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #3b82f6 !important; /* blue-500 */
  outline-offset: 2px !important;
  border-radius: 0.375rem;
}

/* a11y — respect reduced-motion. The app uses several infinite animations
   (float, spin-slow, pulse) and scale transitions; honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Global page chrome — migrated from the old inline <style> in index.html
   when Tailwind moved from the CDN to the build pipeline.

   Restauro UI: the flat #000 base read as "basic". This is a layered near-black
   with a cool undertone plus two soft, fixed light sources (blue top, violet
   bottom-right) and a faint grid. Depth without noise, and it stays put on
   scroll so every page sits on the same considered surface.

   Intensity was halved after the first pass: at the original values the grid and
   the blue wash competed with exercise text. Background is atmosphere — if you
   can consciously see it while reading, it is too strong. */
body {
  background-color: #05070e;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(56, 108, 240, 0.07), transparent 60%),
    radial-gradient(90% 70% at 100% 105%, rgba(139, 92, 246, 0.035), transparent 55%),
    linear-gradient(180deg, #070912 0%, #04060c 100%);
  background-attachment: fixed;
  color: #f8fafc;
  min-height: 100vh;
}

/* Faint architectural grid, fixed behind everything. Very low contrast so it
   only registers as texture, never as content. Hidden under reduced-motion? No,
   it is static, so it stays. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(148, 163, 184, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148, 163, 184, 0.018) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 60% at 50% 0%, #000 8%, transparent 60%);
  -webkit-mask-image: radial-gradient(100% 60% at 50% 0%, #000 8%, transparent 60%);
}

/* Display type for hero headings. Was Syne 800 — an *extended* grotesque, so it
   read wide and stretched at large sizes. Inter is narrower and, tightened to
   -0.04em at weight 700, gives the modern/minimal look without a second webfont. */
.text-display {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

/* Shared elevation for real surfaces — a single considered shadow instead of
   ad-hoc per-component values. */
.elev-1 { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px -8px rgba(0, 0, 0, 0.5); }
.elev-2 { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 32px -12px rgba(0, 0, 0, 0.6); }

/* Entrance motion — a soft rise+fade, used sparingly on hero elements. Honours
   reduced-motion via the block below (transition/animation neutralised). */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-rise { animation: rise-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.24s; }
.delay-4 { animation-delay: 0.32s; }

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Custom scrollbar utility used by scrollable panels */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: #0b1120;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 3px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* Hide scrollbar for the syntax-highlighted editor */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}