/*
 * Professional skin for the student area's DEFAULT theme.
 *
 * The student pages are built for the character themes (Ben 10, Tinkerbell,
 * Avengers, Ponyville, BounceWorld, CricketVerse), which deliberately use a
 * bold outlined comic look: 4px black borders, very round corners, heavy
 * shadows and 900-weight type. The default theme inherited that same look,
 * which reads as cartoonish for students who just want a clean interface.
 *
 * Rather than rewriting the class strings in ~24 page files (and risking the
 * character themes), this stylesheet restyles only the shared visual
 * primitives, and only while the default theme is active. Every rule is scoped
 * to [data-student-theme="default"], which ThemeContext sets on <html> and
 * removes on unmount, so:
 *   - the character themes are untouched
 *   - the teacher and admin areas are untouched
 *   - no component logic changes
 *
 * These selectors are intentionally more specific than Tailwind's single-class
 * utilities, so no !important is needed.
 */

/* ---------------------------------------------------------------- palette */
[data-student-theme='default'] {
  --student-surface: #ffffff;
  --student-canvas: #f8fafc; /* slate-50  */
  --student-line: #e2e8f0; /* slate-200 */
  --student-line-strong: #cbd5e1; /* slate-300 */
  --student-ink: #0f172a; /* slate-900 */
  --student-accent: #0284c7; /* theme primary blue */
  --student-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --student-shadow-lifted: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* ------------------------------------------------------------ borders */
/* The comic look's defining trait: 4px hard black outlines. */
[data-student-theme='default'] .border-4 { border-width: 1px; }
[data-student-theme='default'] .border-2 { border-width: 1px; }
[data-student-theme='default'] .border-b-4 { border-bottom-width: 1px; }
[data-student-theme='default'] .border-t-4 { border-top-width: 1px; }
[data-student-theme='default'] .border-l-4 { border-left-width: 1px; }
[data-student-theme='default'] .border-r-4 { border-right-width: 1px; }

[data-student-theme='default'] .border-black { border-color: var(--student-line); }
[data-student-theme='default'] .border-gray-800,
[data-student-theme='default'] .border-gray-900 { border-color: var(--student-line); }

/* Keep intentional status colours (red/green/amber borders) readable but calmer. */
[data-student-theme='default'] .border-blue-800 { border-color: var(--student-accent); }

/* ------------------------------------------------------------- corners */
[data-student-theme='default'] .rounded-3xl { border-radius: 0.75rem; }
[data-student-theme='default'] .rounded-2xl { border-radius: 0.625rem; }
[data-student-theme='default'] .rounded-xl { border-radius: 0.5rem; }

/* Pills stay pills (filter chips, badges) — they read as professional when the
   border and weight are calmed down, so only their outline changes above. */

/* ------------------------------------------------------------- shadows */
[data-student-theme='default'] .shadow-2xl,
[data-student-theme='default'] .shadow-xl { box-shadow: var(--student-shadow-lifted); }
[data-student-theme='default'] .shadow-lg,
[data-student-theme='default'] .shadow-md { box-shadow: var(--student-shadow); }

/* ---------------------------------------------------------- typography */
/* 900-weight everywhere is the other half of the comic look. */
[data-student-theme='default'] .font-black { font-weight: 600; }
[data-student-theme='default'] .font-extrabold { font-weight: 600; }

/* Oversized display type scaled to something an information-dense page wants. */
[data-student-theme='default'] .text-5xl { font-size: 1.875rem; line-height: 2.25rem; }
[data-student-theme='default'] .text-4xl { font-size: 1.625rem; line-height: 2.125rem; }
[data-student-theme='default'] .text-3xl { font-size: 1.375rem; line-height: 1.875rem; }

/* ------------------------------------------------------------ surfaces */
/*
 * The default theme's gradients are its most cartoonish element — a
 * white-to-black page wash and a black-to-white hero banner. Flatten them to
 * solid, calm surfaces. Each rule sets a background-color alongside removing
 * the gradient so nothing is left transparent.
 */

/* Page canvas: `bg-gradient-to-br from-white via-gray-50 to-black` */
[data-student-theme='default'] .bg-gradient-to-br.from-white {
  background-image: none;
  background-color: var(--student-canvas);
}

/* Hero banner: `bg-gradient-to-r from-black via-gray-800 to-white`.
   Keeps a dark surface so the white heading on it stays readable. */
[data-student-theme='default'] .bg-gradient-to-r.from-black {
  background-image: none;
  background-color: var(--student-ink);
}

/* Primary action: `from-black to-gray-800`. More specific than the hero rule
   above (it also carries .to-gray-800), so this wins for buttons. */
[data-student-theme='default'] .bg-gradient-to-r.from-black.to-gray-800 {
  background-image: none;
  background-color: var(--student-accent);
}
[data-student-theme='default'] .bg-gradient-to-r.from-black.to-gray-800:hover {
  background-color: #0369a1; /* primaryDark */
}

/* Panel and section headers: light grey gradients -> flat surfaces. */
[data-student-theme='default'] .bg-gradient-to-r.from-gray-200,
[data-student-theme='default'] .bg-gradient-to-r.from-gray-100 {
  background-image: none;
  background-color: var(--student-surface);
}
[data-student-theme='default'] .bg-gradient-to-r.from-gray-300,
[data-student-theme='default'] .bg-gradient-to-br.from-gray-50,
[data-student-theme='default'] .bg-gradient-to-r.from-gray-50 {
  background-image: none;
  background-color: var(--student-canvas);
}

/* Flat grey block headers. */
[data-student-theme='default'] .bg-gray-300 { background-color: var(--student-canvas); }

/* Selected filter chip: pure black -> deep slate. */
[data-student-theme='default'] .bg-black { background-color: var(--student-ink); }

/* -------------------------------------------------------------- accents */
/* Muted supporting text instead of full black everywhere. */
[data-student-theme='default'] .text-gray-700 { color: #475569; }

/* Inputs and selects sit on white with a hairline, matching the panels. */
[data-student-theme='default'] input,
[data-student-theme='default'] select,
[data-student-theme='default'] textarea {
  border-color: var(--student-line-strong);
}
[data-student-theme='default'] input:focus,
[data-student-theme='default'] select:focus,
[data-student-theme='default'] textarea:focus {
  border-color: var(--student-accent);
  outline: 2px solid rgba(2, 132, 199, 0.25);
  outline-offset: 1px;
}

/* --------------------------------------------------------- dark mode */
/* The app syncs a `dark` class from the OS preference; keep surfaces coherent. */
[data-student-theme='default'].dark {
  --student-surface: #0f172a;
  --student-canvas: #020617;
  --student-line: #1e293b;
  --student-line-strong: #334155;
  --student-ink: #e2e8f0;
}