/* Eyes Up — shared design tokens.
   Navy, calm, professional. Not a quiz game. */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Fredoka:wght@600&family=Noto+Music&display=swap");

:root {
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Plus Jakarta Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Brand navy — header bars and the dark screens */
  --navy: #0e2445;
  --navy-2: #16345f;
  --navy-text: #b9c8de;

  /* Light (teacher & student) */
  --paper: #f1f4f9;
  --surface: #ffffff;
  --ink: #0f1c30;
  --ink-soft: #435169;
  --muted: #74829a;
  --line: #dbe2ec;
  --accent: #1d3f78;
  --accent-ink: #15305c;
  --accent-soft: #e6edf7;
  --amber: #e8a13c;
  --green: #2f9e44;
  --green-soft: #e6f4ea;
  --red: #d64545;
  --red-soft: #fbeaea;

  /* Dark (projector) */
  --night: #07172f;
  --night-2: #0e2a52;
  --night-line: #21406c;
  --chalk: #eef3fa;
  --chalk-dim: #9db0cb;
  --glow: #8ab2f0;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(14, 36, 69, 0.06), 0 8px 24px rgba(14, 36, 69, 0.08);
  --shadow-lift: 0 2px 4px rgba(14, 36, 69, 0.09), 0 16px 40px rgba(14, 36, 69, 0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }

::placeholder { color: var(--muted); }

/* The logo: two googly eyes + "eyes up". Navy on light by default; on a navy
   surface set color to the light ink and --eyeball to the navy (inverted). */
.wordmark {
  --eyeball: #f4f2ea;
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-family: "Fredoka", "Plus Jakarta Sans", "Manrope", sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--navy);
  white-space: nowrap;
}
.wordmark .logo-eyes { height: 1.05em; width: auto; flex: 0 0 auto; display: block; }
.wordmark .logo-text { font-size: 1.15em; line-height: 1; padding-bottom: 0.08em; }
.wordmark.inverted, .on-navy .wordmark { color: #f4f2ea; --eyeball: var(--navy); }
/* Maker's mark: small, quiet, everywhere a page ends or a sign-in starts. */
.by-peakyou { font-family: var(--font-ui); font-size: 0.74rem; font-weight: 600; color: var(--muted); text-decoration: none; letter-spacing: 0.01em; }
.by-peakyou b { font-weight: 800; }
.by-peakyou:hover { text-decoration: underline; }
.on-navy .by-peakyou { color: var(--navy-text); }
.made-with { text-align: center; font-size: 0.74rem; color: var(--muted); margin: 2rem 0 1rem; }
.made-with a { color: inherit; font-weight: 800; text-decoration: none; }
.wordmark .logo-sub { font-family: var(--font-ui); font-weight: 600; font-size: 0.72em; color: var(--navy-text); margin-left: 0.25em; letter-spacing: 0; }

@keyframes pop-in {
  0% { opacity: 0; transform: translateY(10px) scale(0.96); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}