/**
 * assets/css/app.css
 * ----------------------------------------------------------------------
 * Shared stylesheet for every admin and student page. Before this file
 * existed, the same 3-line <style> block (body font-family + .font-display)
 * was duplicated verbatim inside 8 separate pages — this consolidates
 * that into one place, so a future font change is a one-line edit here
 * instead of a find-and-replace across 8 files.
 *
 * This does NOT replace Tailwind — every page still loads Tailwind via
 * CDN in its own <head> for utility classes. This file only holds the
 * small set of custom, non-utility rules Tailwind's CDN build doesn't
 * cover on its own (custom font-family mappings, focus-visible styling,
 * theme-transition smoothing).
 *
 * NOTE ON THE CDN DEPENDENCY: loading Tailwind from a CDN at runtime is
 * fine for development/demos but isn't recommended for production per
 * Tailwind's own documentation (extra external request, no offline
 * support, larger payload than a purged production build). If this
 * project moves toward production, the next step is a real build
 * pipeline (tailwind.config.js + a compiled, purged output.css) to
 * replace the CDN <script> tag entirely — that requires Node/npm
 * tooling this project doesn't otherwise depend on, so it's kept as a
 * deliberate future step rather than bundled in by default.
 * ----------------------------------------------------------------------
 */

body {
  font-family: 'Inter', sans-serif;
}

.font-display {
  font-family: 'Fraunces', serif;
}

/* Smooths the light/dark theme toggle transition across the whole page,
   rather than every themed element snapping instantly. */
body,
body * {
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

/* Consistent, visible focus ring across every interactive element —
   Tailwind's CDN build doesn't set a project-wide default on its own. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #6366F1; /* indigo-500 */
  outline-offset: 2px;
}

/* Respect users who've asked for reduced motion — overrides the
   transition rule above for anyone with this OS-level preference set. */
@media (prefers-reduced-motion: reduce) {
  body,
  body * {
    transition: none !important;
    animation: none !important;
  }
}

/* ============================================================================
 * Neumorphic / soft-UI utilities
 * ----------------------------------------------------------------------
 * The neumorphic illusion of depth only works when a surface's color is
 * very close to its background's color — the "shadow" is doing all the
 * work, not a color or border contrast. That's why these are tuned
 * specifically against this app's existing base colors (#FAFAF9 light /
 * #0F0F12 dark) rather than being a generic drop-in: a mismatched
 * background would flatten the effect immediately.
 *
 * Three building blocks, meant to be combined:
 *   .soft-surface — a raised card/panel (dual-direction shadow, lighter
 *                   toward the light source, darker away from it)
 *   .soft-inset   — a pressed-in surface, for form inputs — inverted
 *                   shadow direction, reads as "recessed into the page"
 *   .soft-button  — a raised, pressable button with a real "down" state
 *                   on :active, not just a color change
 * ============================================================================ */

.soft-surface {
  background: #FAFAF9;
  border: none;
  box-shadow:
    8px 8px 16px rgba(163, 155, 145, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.9);
}
.dark .soft-surface {
  background: #14151a;
  box-shadow:
    8px 8px 16px rgba(0, 0, 0, 0.5),
    -8px -8px 16px rgba(255, 255, 255, 0.035);
}

.soft-inset {
  background: #FAFAF9;
  border: none;
  box-shadow:
    inset 4px 4px 8px rgba(163, 155, 145, 0.28),
    inset -4px -4px 8px rgba(255, 255, 255, 0.85);
}
.dark .soft-inset {
  background: #0F0F12;
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.55),
    inset -4px -4px 8px rgba(255, 255, 255, 0.025);
}
.soft-inset:focus {
  box-shadow:
    inset 4px 4px 8px rgba(163, 155, 145, 0.28),
    inset -4px -4px 8px rgba(255, 255, 255, 0.85),
    0 0 0 3px rgba(99, 102, 241, 0.25);
}
.dark .soft-inset:focus {
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.55),
    inset -4px -4px 8px rgba(255, 255, 255, 0.025),
    0 0 0 3px rgba(99, 102, 241, 0.35);
}
/* Validation state — a dedicated rule rather than a Tailwind invalid:ring
   utility, since Tailwind's ring utilities also set box-shadow and would
   simply overwrite this custom shadow instead of combining with it. */
.soft-inset:invalid {
  box-shadow:
    inset 4px 4px 8px rgba(163, 155, 145, 0.28),
    inset -4px -4px 8px rgba(255, 255, 255, 0.85),
    0 0 0 2px rgba(244, 63, 94, 0.4);
}

.soft-button {
  background: linear-gradient(145deg, #6366f1, #4f46e5);
  box-shadow:
    6px 6px 14px rgba(79, 70, 229, 0.35),
    -3px -3px 10px rgba(129, 140, 248, 0.35);
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.soft-button:hover {
  box-shadow:
    4px 4px 10px rgba(79, 70, 229, 0.4),
    -2px -2px 7px rgba(129, 140, 248, 0.4);
}
.soft-button:active {
  box-shadow:
    inset 3px 3px 7px rgba(0, 0, 0, 0.25),
    inset -2px -2px 5px rgba(255, 255, 255, 0.15);
  transform: translateY(1px);
}

/* Radio/checkbox "choice pills" — raised when unselected (an option you
   could press), pressed-in with an indigo tint when selected (an option
   you HAVE pressed) — the same raised/recessed metaphor as buttons and
   inputs, applied to a selection control instead of text entry. */
.soft-choice {
  background: #FAFAF9;
  box-shadow:
    4px 4px 8px rgba(163, 155, 145, 0.25),
    -4px -4px 8px rgba(255, 255, 255, 0.8);
  transition: box-shadow 150ms ease, background-color 150ms ease;
}
.dark .soft-choice {
  background: #14151a;
  box-shadow:
    4px 4px 8px rgba(0, 0, 0, 0.4),
    -4px -4px 8px rgba(255, 255, 255, 0.03);
}
.soft-choice:has(:checked) {
  background: rgba(99, 102, 241, 0.07);
  box-shadow:
    inset 3px 3px 6px rgba(79, 70, 229, 0.2),
    inset -2px -2px 5px rgba(255, 255, 255, 0.7);
}
.dark .soft-choice:has(:checked) {
  background: rgba(99, 102, 241, 0.12);
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.5),
    inset -2px -2px 5px rgba(255, 255, 255, 0.02);
}