/* ==========================================================================
   NGI UI — Neurogenetics Institute Design System (foundation layer)
   --------------------------------------------------------------------------
   Owner mandate 2026-11-11: one consistent, premium interaction standard
   across the whole ecosystem. This file defines the design tokens and the
   shared interaction polish (buttons, links, forms, menus, focus, motion).
   It deliberately does NOT recolour the individual products — Academy,
   Synapse, Codex and the Institute keep their own identities.

   Load it LAST on pages that adopt it:
     <link rel="stylesheet" href="/ngi-ui.css?v=1">
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --ngi-ink: #0A192F;
  --ngi-body: #334155;
  --ngi-mut: #64748B;
  --ngi-accent: #0284C7;
  --ngi-accent-bright: #38BDF8;
  --ngi-surface: #FFFFFF;
  --ngi-bg: #F8FAFC;
  --ngi-line: #E2E8F0;
  --ngi-line-strong: #CBD5E1;
  --ngi-ring: rgba(2, 132, 199, 0.35);
  --ngi-r-sm: 8px;
  --ngi-r-md: 12px;
  --ngi-r-lg: 16px;
  --ngi-r-pill: 999px;
  --ngi-t-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --ngi-t-med: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --ngi-shadow-1: 0 1px 3px rgba(15, 23, 42, 0.08);
  --ngi-shadow-2: 0 12px 32px -14px rgba(2, 132, 199, 0.35);
  --ngi-shadow-3: 0 24px 60px -18px rgba(15, 23, 42, 0.35);
}

/* ---------- 2. Focus: visible everywhere (WCAG) ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--ngi-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 3. Buttons: one consistent interaction standard ---------- */
/* Applies to real <button> elements and shared button classes on adopting
   pages. Existing per-page colours win where pages define them; this layer
   guarantees the MOTION, feedback and states are identical everywhere. */
button, .btn, .btn-solid, .btn-ghost, .btn-primary, .auth-btn,
.ngi-bell, .board-chip, .chip, .quick-btn {
  transition: background-color var(--ngi-t-fast),
              color var(--ngi-t-fast),
              border-color var(--ngi-t-fast),
              box-shadow var(--ngi-t-med),
              transform 0.12s ease, filter var(--ngi-t-fast);
}
button:active, .btn:active, .btn-solid:active, .btn-ghost:active,
.auth-btn:active, .quick-btn:active { transform: scale(0.97); }
button:disabled, .btn:disabled, .btn-solid:disabled, .btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.3);
}

/* ---------- 4. Links: smooth colour motion ---------- */
a { transition: color var(--ngi-t-fast); }

/* ---------- 5. Cards: gentle lift on hover (opt-in class) ---------- */
.ngi-lift { transition: transform var(--ngi-t-med), box-shadow var(--ngi-t-med); }
.ngi-lift:hover { transform: translateY(-2px); }

/* ---------- 6. Forms: consistent focus rings ---------- */
input, textarea, select {
  transition: border-color var(--ngi-t-fast), box-shadow var(--ngi-t-fast);
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--ngi-accent);
  box-shadow: 0 0 0 3px var(--ngi-ring);
}

/* ---------- 7. Menus, popovers, panels: fade+rise entrance ---------- */
.ngi-menu, .ngi-bell-panel, .subject-dropdown, .ngi-usermenu, .dd-menu {
  animation: ngiMenuIn 0.16s ease-out;
}
@keyframes ngiMenuIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 8. Scrollbars inside app panels (subtle) ---------- */
.ngi-bell-list::-webkit-scrollbar, .ngi-bell-list::-webkit-scrollbar-thumb { width: 8px; }
.ngi-bell-list::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 8px; }

/* ---------- 9. Reduced motion: disable decorative movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 10. Dark-surface pages: keep focus rings bright ---------- */
body[style*="#05070A"] :focus-visible,
.ngi-dark :focus-visible {
  outline-color: #5EC8FF;
}