/*
 * 212 Admin design tokens.
 *
 * Aligned with the school portal admin palette (Lochmara) recorded in
 * AGENTS.md decision log 2026-07-25, so the control plane reads as part of the
 * same product rather than a separate internal tool.
 */

:root {
  color-scheme: light dark;

  /* Admin role palette (Lochmara). */
  --role-50: #eef7fd;
  --role-100: #d6ebf9;
  --role-200: #aed7f3;
  --role-300: #7dbdea;
  --role-400: #3f97d8;
  --role-500: #006fb6;
  --role-600: #005a95;
  --role-700: #004876;
  --role-800: #003a60;
  --role-900: #002c48;

  /* Neutrals. */
  --canvas: #f5f7fa;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: #dbe3ec;
  --border-strong: #c3cfdd;
  --ink: #16202b;
  --ink-soft: #47586b;
  --muted: #6b7c90;

  /* Status. */
  --ok-bg: #e7f6ed;
  --ok-fg: #1a6b3c;
  --warn-bg: #fdf3e2;
  --warn-fg: #8a5a10;
  --crit-bg: #fdeaea;
  --crit-fg: #97231f;
  --neutral-bg: #eef1f5;
  --neutral-fg: #4a5a6b;

  /* Shape and depth. */
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 48, .06);
  --shadow: 0 8px 24px rgba(16, 32, 48, .08);

  /* Motion, matching the portal's transitions.dev token names. */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --ease-smooth-out: cubic-bezier(.22, 1, .36, 1);

  --sidebar-width: 236px;

  /* Inter is the product typeface (WS21 self-hosts it for the portals). */
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0f1720;
    --surface: #16202b;
    --surface-alt: #1b2732;
    --border: #2a3846;
    --border-strong: #3a4a5b;
    --ink: #e8eef5;
    --ink-soft: #b3c1d0;
    --muted: #8b9aab;

    --ok-bg: #12321f;
    --ok-fg: #7fd1a1;
    --warn-bg: #37290f;
    --warn-fg: #e6b464;
    --crit-bg: #3a1a19;
    --crit-fg: #f09b96;
    --neutral-bg: #24313e;
    --neutral-fg: #a9b8c8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 8px 24px rgba(0, 0, 0, .45);
  }
}