/* ONE palette app-wide: the prod welcome template (Chris 09-29) — the same warm
   paper / #262624 night the desk and Holly's Paper theme already use. Pages no
   longer need page-scoped palette blocks to look like the desk. */
:root {
  --sk-dur-fast: 120ms;
  --sk-dur: 180ms;
  --sk-dur-slow: 260ms;
  --sk-ease-out: cubic-bezier(.2,.8,.2,1);
  --sk-ease-in-out: cubic-bezier(.4,0,.2,1);
  /* The DAY palette. Never redefined by any theme, mode or scheme (a ratchet,
     static/js/common/appHeaderPaper.test.js, enforces it): the light values of
     the app tokens below, and what the app header is always painted in. */
  --sk-day-paper: #faf9f5;
  --sk-day-surface: #ffffff;
  --sk-day-surface-2: #f5f4ed;
  --sk-day-hair: #e5e2da;
  --sk-day-ink: #1f1e1d;
  --sk-day-ink-2: #4a4845;
  --sk-day-muted: #67645e;
  --sk-paper: var(--sk-day-paper);
  --sk-surface: var(--sk-day-surface);
  --sk-surface-2: var(--sk-day-surface-2);
  --sk-hair: var(--sk-day-hair);
  --sk-ink: var(--sk-day-ink);
  --sk-ink-2: var(--sk-day-ink-2);
  --sk-muted: var(--sk-day-muted);
  --sk-accent: #ff4d00;
  /* The UI face of the desk and the sk primitives (Space Grotesk, loaded app-wide by
     base.html); Korean falls through to Noto Sans KR. Body copy keeps --sk-font-sans. */
  --sk-font-ui: "Space Grotesk", "Noto Sans KR", "Inter", system-ui, sans-serif;
  --sk-ok: #167342;
  --sk-warn: #805800;
  --sk-danger: #b91c1c;
  color: var(--sk-ink);
  background: var(--sk-paper);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sk-paper: #262624;
    --sk-surface: #2b2a28;
    --sk-surface-2: #1f1e1d;
    --sk-hair: #3a3937;
    --sk-ink: #eceae5;
    --sk-ink-2: #cfccc5;
    --sk-muted: #a6a39b;
    --sk-hover: #33322f;
    --sk-glass: rgba(38, 38, 36, 0.88);
  }
}
:root[data-theme="dark"] {
  --sk-paper: #262624;
  --sk-surface: #2b2a28;
  --sk-surface-2: #1f1e1d;
  --sk-hair: #3a3937;
  --sk-ink: #eceae5;
  --sk-ink-2: #cfccc5;
  --sk-muted: #a6a39b;
  --sk-hover: #33322f;
  --sk-glass: rgba(38, 38, 36, 0.88);
}
/* THE APP HEADER IS ALWAYS PAPER (Chris 10-05, brain #1284). The fixed top bar
   (base.html app_header: student, teacher/school-admin and staff variants) keeps
   the paper off-white in light, dark and every Holly colour scheme, so a school's
   logo never sits on a dark or see-through bar. The header OWNS its tokens: it
   re-pins the sk set to the day palette on itself, so everything inside it (bell,
   messages, logo slot, APP|CHAT switch, dropdowns, the night-compat layer's
   var()s) reads daylight too. Unscoped on purpose — no theme selector can reach
   past a value declared on the element itself. Do not theme the header anywhere
   else; appHeaderPaper.test.js fails if a stylesheet tries. */
.sk-app-header {
  --sk-paper: var(--sk-day-paper);
  --sk-surface: var(--sk-day-surface);
  --sk-surface-2: var(--sk-day-surface-2);
  --sk-ink: var(--sk-day-ink);
  --sk-ink-2: var(--sk-day-ink-2);
  --sk-muted: var(--sk-day-muted);
  --sk-hair: var(--sk-day-hair);
  --sk-micro: var(--sk-day-muted);
  --sk-hover: var(--sk-day-surface-2);
  --sk-glass: var(--sk-day-paper);
  --sk-line-strong: var(--sk-day-hair);
  color-scheme: light;
  background-color: var(--sk-day-paper) !important;
  border-bottom: 1px solid var(--sk-day-hair);
  color: var(--sk-day-ink);
}
*,
*::before,
*::after {
  border-radius: 0 !important;
}
.sk-input {
  background: var(--sk-surface);
  border: 1px solid var(--sk-hair);
  color: var(--sk-ink);
  padding: 0.5rem;
}
.sk-panel {
  background: var(--sk-surface);
  border: 1px solid var(--sk-hair);
}
.sk-chip {
  display: inline-flex;
  gap: 0.3rem;
  border: 1px solid var(--sk-hair);
  padding: 0.25rem 0.5rem;
}
.sk-kicker {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--sk-muted);
}
/* Filter controls, app-wide: a square field with a hair border. Any page that
   puts a search box or a select in a filter row uses these two classes. */
.sk-field, .sk-select {
  height: 34px;
  border: 1px solid var(--sk-hair);
  background: var(--sk-surface);
  color: var(--sk-ink);
  font: 400 12px/1 var(--sk-font-sans);
  padding: 0 0.75rem;
}
.sk-field { font-weight: 400; font-size: 13px; }
.sk-field:focus, .sk-select:focus { outline: none; border-color: var(--sk-ink); }
.sk-select {
  padding-right: 1.75rem;
  appearance: none;
  -webkit-appearance: none;
  background: var(--sk-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237d7a73' stroke-width='1.5'/></svg>") no-repeat right 0.6rem center;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  :root { --sk-dur-fast: 0ms; --sk-dur: 0ms; --sk-dur-slow: 0ms; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}