/* ==========================================================================
   Hey Hoolo — shared design tokens
   Loaded by the student page, the Teacher workspace and the Admin console so
   all three surfaces speak the same visual language.

   Contents
   1. Typography
   2. Colour system (light default + dark theme for the student toggle)
   3. Shape, elevation, spacing
   4. Motion
   5. Shared primitives (skip link, screen-reader text, focus ring, scrollbar)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography
   Display  : Nunito  — large headings, the owl's personality
   UI / body: DM Sans — highly legible interface copy
   Both have strong local fallbacks so the pages never depend on the CDN.
   -------------------------------------------------------------------------- */
:root {
  --hh-font-display: 'Nunito', 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --hh-font-ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --hh-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

/* --------------------------------------------------------------------------
   2. Colour system
   Warm off-white canvas, deep blue-navy ink, purple = Hoolo's action colour,
   mint = healthy/safe, amber = needs review, soft blue = information.
   -------------------------------------------------------------------------- */
:root {
  /* Canvas + surfaces */
  --hh-canvas: #faf8fd;
  --hh-canvas-tint: #f2edfc;
  --hh-surface: #ffffff;
  --hh-surface-sunk: #f7f5fd;
  --hh-surface-raised: #ffffff;

  /* Ink */
  --hh-ink: #1e1a45;
  --hh-ink-soft: #4a4472;
  --hh-ink-muted: #6b6690;
  --hh-ink-on-accent: #ffffff;

  /* Brand — purple */
  --hh-purple: #6c4bf4;
  --hh-purple-strong: #5636d8;
  --hh-purple-deep: #3f2a9e;
  --hh-purple-soft: #f1ecff;
  --hh-purple-ring: rgba(108, 75, 244, 0.32);

  /* Status — mint (safe / healthy / connected) */
  --hh-mint: #0f9d76;
  --hh-mint-strong: #087a5c;
  --hh-mint-soft: #e2f7f0;
  --hh-mint-ring: rgba(15, 157, 118, 0.28);

  /* Status — amber (review / attention) */
  --hh-amber: #b45309;
  --hh-amber-bright: #f59e0b;
  --hh-amber-soft: #fdf1dc;
  --hh-amber-ring: rgba(180, 83, 9, 0.26);

  /* Status — soft blue (information / integrations) */
  --hh-blue: #1d5fd0;
  --hh-blue-bright: #3b82f6;
  --hh-blue-soft: #e6efff;
  --hh-blue-ring: rgba(29, 95, 208, 0.26);

  /* Status — red (reserved for genuine critical states) */
  --hh-red: #c02626;
  --hh-red-soft: #fdeaea;
  --hh-red-ring: rgba(192, 38, 38, 0.28);

  /* Lines + focus */
  --hh-line: #e6e1f5;
  --hh-line-strong: #d5cdee;
  --hh-focus: #6c4bf4;

  /* Navy used by the Teacher / Admin sidebars */
  --hh-navy-900: #161338;
  --hh-navy-800: #1e1a45;
  --hh-navy-700: #2a2560;
  --hh-navy-600: #3a3478;
  --hh-navy-ink: #eae7ff;
  --hh-navy-ink-muted: #a8a2d6;
  --hh-navy-line: rgba(255, 255, 255, 0.10);
}

/* Dark theme for the student page's existing theme toggle.
   The toggle itself lives in index.html and flips body[data-theme]. */
body[data-theme='dark'] {
  --hh-canvas: #14112b;
  --hh-canvas-tint: #1b1740;
  --hh-surface: #211c47;
  --hh-surface-sunk: #1a1640;
  --hh-surface-raised: #262055;

  --hh-ink: #f2efff;
  --hh-ink-soft: #cdc7f0;
  --hh-ink-muted: #a49dd8;
  --hh-ink-on-accent: #ffffff;

  --hh-purple: #a78bff;
  --hh-purple-strong: #bba4ff;
  --hh-purple-deep: #c9b8ff;
  --hh-purple-soft: rgba(167, 139, 255, 0.16);
  --hh-purple-ring: rgba(167, 139, 255, 0.4);

  --hh-mint: #4ade9f;
  --hh-mint-strong: #6ee7b3;
  --hh-mint-soft: rgba(74, 222, 159, 0.16);
  --hh-mint-ring: rgba(74, 222, 159, 0.36);

  --hh-amber: #fbbf5c;
  --hh-amber-bright: #fcd34d;
  --hh-amber-soft: rgba(251, 191, 92, 0.16);
  --hh-amber-ring: rgba(251, 191, 92, 0.36);

  --hh-blue: #7cb2ff;
  --hh-blue-bright: #93c5fd;
  --hh-blue-soft: rgba(124, 178, 255, 0.16);
  --hh-blue-ring: rgba(124, 178, 255, 0.36);

  --hh-red: #ff9b9b;
  --hh-red-soft: rgba(255, 155, 155, 0.16);
  --hh-red-ring: rgba(255, 155, 155, 0.36);

  --hh-line: rgba(255, 255, 255, 0.12);
  --hh-line-strong: rgba(255, 255, 255, 0.2);
  --hh-focus: #c9b8ff;
}

/* --------------------------------------------------------------------------
   3. Shape, elevation, spacing
   -------------------------------------------------------------------------- */
:root {
  --hh-radius-sm: 8px;
  --hh-radius: 12px;
  --hh-radius-md: 16px;
  --hh-radius-lg: 22px;
  --hh-radius-xl: 28px;
  --hh-radius-pill: 999px;

  --hh-shadow-xs: 0 1px 2px rgba(30, 26, 69, 0.06);
  --hh-shadow-sm: 0 2px 8px rgba(30, 26, 69, 0.07);
  --hh-shadow: 0 8px 24px rgba(30, 26, 69, 0.09);
  --hh-shadow-md: 0 14px 34px rgba(30, 26, 69, 0.12);
  --hh-shadow-lg: 0 24px 56px rgba(30, 26, 69, 0.16);

  --hh-space-1: 4px;
  --hh-space-2: 8px;
  --hh-space-3: 12px;
  --hh-space-4: 16px;
  --hh-space-5: 20px;
  --hh-space-6: 24px;
  --hh-space-8: 32px;
  --hh-space-10: 40px;
  --hh-space-12: 48px;
  --hh-space-16: 64px;

  --hh-tap: 44px; /* minimum comfortable touch target */
}

/* --------------------------------------------------------------------------
   4. Motion — 150–220 ms, gentle easing, fully reversible
   -------------------------------------------------------------------------- */
:root {
  --hh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hh-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hh-t-fast: 150ms;
  --hh-t: 180ms;
  --hh-t-slow: 220ms;
}

/* --------------------------------------------------------------------------
   5. Shared primitives
   -------------------------------------------------------------------------- */

/* Keyboard-only skip link — the first focusable element on teacher/admin,
   and available on the student page too. */
.skip-link {
  position: absolute;
  top: -60px;
  left: 12px;
  z-index: 5000;
  background: var(--hh-purple);
  color: #fff;
  font-family: var(--hh-font-ui);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--hh-radius) var(--hh-radius);
  text-decoration: none;
  transition: top var(--hh-t) var(--hh-ease);
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--hh-focus);
  outline-offset: 2px;
}

/* Content available to assistive tech only. */
.hh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* One consistent, always-visible focus ring. Never remove focus outlines. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--hh-focus);
  outline-offset: 2px;
  border-radius: var(--hh-radius-sm);
}

/* Scrollbars */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--hh-line-strong);
  border-radius: var(--hh-radius-pill);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ==========================================================================
   Reduced motion — remove loops, lifts and staggering, keep the UI usable.
   ========================================================================== */
@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;
  }
}

/* ==========================================================================
   Shared animations
   ========================================================================== */

/* The owl's gentle float. Decorative only, slow enough not to distract. */
@keyframes hh-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}

/* Soft breathing glow behind the companion. */
@keyframes hh-breathe {
  0%,
  100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Staggered entrance for the primary sections. */
@keyframes hh-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hh-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

@keyframes hh-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Respect reduced motion for the decorative loops specifically. */
@media (prefers-reduced-motion: reduce) {
  .hh-owl-figure,
  .hh-owl-glow {
    animation: none !important;
  }
  .hh-rise {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   6. Warm palette — Hoolo companion area (student chat stage)
   Warm oranges, creams, and earthy browns for the child-friendly chat area.
   Sits alongside the existing purple system; used by the mascot + chat UI.
   ========================================================================== */
:root {
  --hh-warm-canvas: #FAF6EE;
  --hh-warm-surface: #FDFBF7;
  --hh-warm-sunk: #EFEAE2;
  --hh-warm-surface-raised: #F0EBE3;
  --hh-warm-border: #E8DEC8;
  --hh-warm-border-strong: #DED3BD;
  --hh-warm-ink: #301C16;
  --hh-warm-ink-soft: #7A6053;
  --hh-warm-ink-muted: #8C5C43;
  --hh-warm-accent: #E96628;
  --hh-warm-accent-strong: #C44B18;
  --hh-warm-accent-hover: #D3541D;
  --hh-warm-user-bubble: #E7FFDB;
  --hh-warm-user-border: #CDE8C0;
  --hh-warm-hoolo-bubble: #FFFFFF;
  --hh-warm-hoolo-border: #E5DEC9;
  --hh-warm-check: #53BDEB;
  --hh-warm-halo: rgba(234, 220, 200, 0.4);
}

body[data-theme='dark'] {
  --hh-warm-canvas: #1C1714;
  --hh-warm-surface: #262019;
  --hh-warm-sunk: #1E1914;
  --hh-warm-surface-raised: #2A231B;
  --hh-warm-border: #3D3228;
  --hh-warm-border-strong: #4A3E32;
  --hh-warm-ink: #F5EDE0;
  --hh-warm-ink-soft: #C4B49E;
  --hh-warm-ink-muted: #A89478;
  --hh-warm-accent: #F0884E;
  --hh-warm-accent-strong: #E96628;
  --hh-warm-accent-hover: #F5A06A;
  --hh-warm-user-bubble: #1E3318;
  --hh-warm-user-border: #2A4A22;
  --hh-warm-hoolo-bubble: #2A231B;
  --hh-warm-hoolo-border: #3D3228;
  --hh-warm-check: #53BDEB;
  --hh-warm-halo: rgba(80, 60, 40, 0.4);
}

/* Hoolo companion animations */
@keyframes hoolo-bounce-dot {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes hoolo-fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes hoolo-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(233, 102, 40, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(233, 102, 40, 0); }
  100% { box-shadow: 0 0 0 0 rgba(233, 102, 40, 0); }
}

@keyframes hoolo-sparkle-float {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-30px) scale(0.5); }
}

@keyframes hoolo-zzz-float {
  0%, 100% { opacity: 0.7; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-6px); }
}