/* Crow's Nest theme — shared by the teacher dashboard and the student extension pages.
   (extension/theme.css is an identical copy.) */
@font-face { font-family: Fredoka; font-weight: 500; font-display: swap; src: url(fonts/fredoka-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 600; font-display: swap; src: url(fonts/fredoka-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: Fredoka; font-weight: 700; font-display: swap; src: url(fonts/fredoka-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Atkinson; font-weight: 400; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Atkinson; font-weight: 700; font-display: swap; src: url(fonts/atkinson-hyperlegible-latin-700-normal.woff2) format('woff2'); }

:root {
  --sky: #eaf6fb;        /* page background */
  --foam: #f5fbfd;       /* quiet fills */
  --paper: #ffffff;      /* panels */
  --line: #cfe5ef;
  --ink: #12355b;        /* deep-sea navy text */
  --ink-soft: #4c6585;
  --lagoon: #1597a5;     /* primary */
  --lagoon-deep: #0d6f7a;
  --lagoon-wash: #d4f0f2;
  --sun: #ffc93c;        /* raised hand, highlights */
  --sun-wash: #fff4d1;
  --tangerine: #ff8a3d;  /* off-task */
  --tangerine-wash: #ffe8d8;
  --signal: #e5484d;     /* alerts */
  --signal-wash: #fde3e4;
  --grape: #7c5cff;      /* scenes */
  --grape-wash: #ece7ff;
  --display: Fredoka, 'Baloo 2', ui-rounded, system-ui, sans-serif;
  --body: Atkinson, 'Atkinson Hyperlegible', system-ui, sans-serif;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--sky); color: var(--ink); font: 16px/1.5 var(--body); }
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--lagoon-deep); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; border-radius: 6px; }

/* Buttons: chunky, rounded, with a pressed-down feel */
.btn, button {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; gap: 7px; justify-content: center;
  padding: 8px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--paper); color: var(--ink); border: 2px solid var(--line);
  box-shadow: 0 3px 0 var(--line); transition: transform .08s, box-shadow .08s;
}
button:hover { border-color: var(--lagoon); }
button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
button.primary { background: var(--lagoon); color: #fff; border-color: var(--lagoon-deep); box-shadow: 0 3px 0 var(--lagoon-deep); }
button.sun { background: var(--sun); border-color: #e3a90f; box-shadow: 0 3px 0 #e3a90f; }
button.grape { background: var(--grape); color: #fff; border-color: #5d3fe0; box-shadow: 0 3px 0 #5d3fe0; }
button.danger { color: var(--signal); border-color: #f5b7b9; box-shadow: 0 3px 0 #f5b7b9; }
button.ghost { background: transparent; border-color: transparent; box-shadow: none; }
button.small { font-size: 13px; padding: 5px 11px; box-shadow: 0 2px 0 var(--line); }

input, select, textarea {
  width: 100%; background: var(--paper); border: 2px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 12px; font-family: var(--body); font-size: 15px; font-weight: 400;
}
input:focus, select:focus, textarea:focus { border-color: var(--lagoon); outline: none; box-shadow: 0 0 0 3px var(--lagoon-wash); }

.muted { color: var(--ink-soft); }
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }