/* ============================================
   Bindi app theme — design system v0.2 adoption (dashboard / app shell)
   Loaded AFTER styles.css and extra-tools.css. To roll back, remove the
   <link> in templates/base.html (hardcoded mauve fixes live in styles.css).
   Scope: app UI only. Presentations, slides and classroom print outputs
   are intentionally untouched.
   ============================================ */

:root {
  /* Retire mauve (LEGACY) — legacy aliases now resolve to the live brand blue.
     --accent is used as TEXT in many places, so it must pass 4.5:1 on white:
     #4A6DA8 = 5.19:1 (mauve #A88B9D was 3.07:1). */
  --accent: var(--bindi-color-blue-600);
  --accent-light: var(--bindi-color-brand-blue);
  --accent-lighter: var(--bindi-color-blue-50);
  --accent-foreground: #ffffff;

  /* Focus: purple (6.42:1) */
  --border-focus: var(--bindi-color-border-focus);


  --shadow-glow: 0 0 20px rgba(74, 109, 168, 0.15);

  /* Sidebar */
  --sidebar-active: var(--bindi-color-bg-selected);
  --sidebar-active-border: var(--bindi-color-blue-600);
  --sidebar-text-muted: var(--bindi-color-text-muted);
}

/* Global focus ring: 3px purple, 2px offset (design system §7) */
:focus-visible,
button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--bindi-size-focus-ring-width) solid var(--bindi-color-border-focus);
  outline-offset: var(--bindi-size-focus-ring-offset);
}

.skip-link:focus {
  outline: var(--bindi-size-focus-ring-width) solid var(--bindi-color-border-focus);
}

/* Form fields: purple border + soft halo on focus */
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.form-control:focus {
  border-color: var(--bindi-color-border-focus);
  box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.18);
}

/* Primary action = blue-600 (white text 5.19:1). One primary per view. */
.btn-primary {
  background: var(--bindi-color-action-primary-bg);
  color: var(--bindi-color-action-primary-text);
}
.btn-primary:hover {
  background: var(--bindi-color-action-primary-hover);
}
.btn-primary:active {
  background: var(--bindi-color-action-primary-active);
}

/* Navigation: active state follows the remapped --accent / --accent-lighter /
   --sidebar-active tokens above (blue-600 on blue-50). */

/* Badges: single solid tokens instead of one-off gradients */
.nav-badge.new {
  background: var(--bindi-color-brand-purple);
  color: #fff;
}
.nav-badge.beta {
  background: var(--bindi-color-status-success-text);
  color: #fff;
}

/* Logos keep intrinsic proportions */
.logo-img,
.sidebar-logo img {
  height: auto;
  object-fit: contain;
}

/* Reduced motion: stop smooth scrolling only. Spinners/progress animations are
   left running because users rely on them as "working" feedback. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Student progress table: scroll inside its card on narrow screens instead of clipping */
@media (max-width: 768px) {
  .progress-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Muted text: slightly darker for screen contrast (#5A6478, 5.95:1). Screen only,
   so printed worksheets keep their existing colours. */
@media screen {
  :root { --muted-foreground: var(--bindi-color-text-muted); }
}

/* The wordmark PNGs have an opaque near-white background (no alpha). Multiply
   blends it into light surfaces so no faint box shows around the logo. */
img[src*="bindi-logo"] {
  mix-blend-mode: multiply;
}