/*
  Jericho UFSD design tokens — approved by the district 2026-10-17.
  Brand colors from the Jericho School District Brand Kit and jerichoschools.org:
    Jericho Blue #0C355E · Jericho Yellow #F1C43D · Word Grays #555A60 · White
  Every text/background pair used here meets WCAG AA (see review/brand-preview.html).
  Yellow is never used for text on white (1.65:1); it is a fill with blue text on it.
*/

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-latin-var.woff2") format("woff2");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --jericho-blue: #0c355e;
  --jericho-yellow: #f1c43d;
  --word-grays: #555a60;

  /* Roles (light) */
  --color-primary: var(--jericho-blue);
  --color-primary-hover: #082641;
  --color-on-primary: #ffffff;
  --color-accent: var(--jericho-yellow);
  --color-accent-hover: #e0b023;
  --color-on-accent: var(--jericho-blue);

  --color-bg: #ffffff;
  --color-surface: #f4f6f9;
  --color-text: #1d2733;
  --color-text-muted: var(--word-grays);
  --color-link: var(--jericho-blue);
  --color-border: #d5dae1;          /* decorative card edges */
  --color-border-strong: #8a9099;   /* form controls (3:1) */

  --color-chip-bg: #e6edf5;
  --color-chip-text: var(--jericho-blue);
  --color-badge-bg: #fdf3d3;
  --color-badge-text: #1d2733;
  --color-success-bg: #e3f3e8;
  --color-success-text: #1e6b3a;
  --color-caution-bg: #fdf3d3;
  --color-caution-text: #6b4300;

  --color-focus: var(--jericho-blue);
  --color-focus-on-primary: var(--jericho-yellow);

  /* Type */
  --font-heading: "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgb(12 53 94 / 8%), 0 2px 8px rgb(12 53 94 / 6%);
}

/* Dark theme: only when the viewer turns it on with the header switch (assets/js/theme.js).
   Light is the default whatever the device is set to. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: var(--jericho-blue);
  --color-primary-hover: #134a80;
  --color-bg: #0a1724;
  --color-surface: #12253a;
  --color-text: #e9eef4;
  --color-text-muted: #a9b3be;
  --color-link: #9cc4ee;
  --color-border: #24384f;
  --color-border-strong: #6f7f90;
  --color-chip-bg: #1c3a5c;
  --color-chip-text: #dbe7f5;
  --color-badge-bg: #3b3216;
  --color-badge-text: #f6dd8a;
  --color-success-bg: #143826;
  --color-success-text: #8fd4a6;
  --color-caution-bg: #3b3216;
  --color-caution-text: #f6dd8a;
  --color-focus: var(--jericho-yellow);
  --shadow-card: none;
}