/*
 * Ojito theme for the pilot deployment.
 * Lives only in this deployment's theme/ folder; it is not part of the Ojito repo.
 * Edit any value and reload the page: no rebuild needed. See docs/theming.md for every variable.
 * Colors and type follow the district's classroom design handoff (navy structure, red accent, light blue).
 */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('/theme/poppins-600.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('/theme/poppins-700.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/theme/jost.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/theme/ibm-plex-mono-400.woff2') format('woff2'); }

:root {
  /* Top bar */
  --oj-shell-bg: #16375F;        /* district navy */
  --oj-shell-text: #FFFFFF;
  --oj-shell-muted: #BAE3FD;     /* district light blue: district name, Sign out */
  --oj-shell-active: #C51D25;    /* district red: active nav underline */
  --oj-shell-border: #112B4A;    /* a shade darker than the bar */

  /* Brand */
  --oj-primary: #16375F;         /* navy carries the structure */
  --oj-on-primary: #FFFFFF;
  --oj-accent: #C51D25;          /* red is a sparing accent */
  --oj-on-accent: #FFFFFF;
  --oj-highlight: #EAF0F7;       /* navy 50: selected and active backgrounds */
  --oj-on-highlight: #16375F;

  /* Surfaces */
  --oj-page: #F6F6F6;
  --oj-surface: #FFFFFF;
  --oj-surface-muted: #ECEDEE;
  --oj-border: #D1D3D4;          /* district grey */
  --oj-border-strong: #B4B7B9;

  /* Text */
  --oj-text: #34383C;
  --oj-text-strong: #0E1626;
  --oj-text-muted: #6A6E73;
  --oj-text-subtle: #8A8E92;
  --oj-link: #1C4478;

  /* Feedback */
  --oj-danger: #C51D25;
  --oj-danger-soft: #FBEAEB;
  --oj-warning: #8A6400;
  --oj-warning-soft: #FBF1D5;
  --oj-success: #1E8A4C;
  --oj-success-soft: #E4F3EA;

  /* Student status */
  --oj-status-live: #1E8A4C;
  --oj-status-idle: #E0A106;
  --oj-status-locked: #16375F;
  --oj-status-offline: #B4B7B9;

  /* Type */
  --oj-font-body: 'Jost', 'Tw Cen MT', 'Century Gothic', sans-serif;
  --oj-font-display: 'Poppins', 'Century Gothic', 'Futura', sans-serif;
  --oj-font-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --oj-display-transform: uppercase;
  --oj-display-tracking: 0.04em;

  /* Shape */
  --oj-radius: 8px;
  --oj-radius-card: 14px;
  --oj-shadow-card: 0 1px 3px rgba(14, 22, 38, 0.08), 0 1px 2px rgba(14, 22, 38, 0.04);
  --oj-shadow-overlay: 0 12px 28px rgba(14, 22, 38, 0.12), 0 4px 8px rgba(14, 22, 38, 0.06);

  /* Overlays */
  --oj-overlay: rgba(22, 55, 95, 0.7);
  --oj-focus-ring: 0 0 0 3px rgba(28, 68, 120, 0.35);
}