/* SMUSD RISE design tokens. Load before every other stylesheet.
   The first block keeps the 14 property names styles.css already uses,
   so existing rules pick up the new look without being renamed.
   Every color in the app should come from this file.
   From Tate's restyle kit (docs/sierra-meadow/brand/smusd-rise-restyle.zip, 10/16/2026). The blocks marked "Added for the build" are not in the
   kit: banner, overlay and shadow tokens, a high-contrast theme and a color-blind status set, patterned on ASPIRE. */

:root {
  color-scheme: light;

  /* The 14 existing properties, new values */
  --bg: #FAF7F2;          /* warm paper page */
  --panel: #FFFFFF;       /* cards, tables, dialogs, inputs */
  --ink: #221E1A;         /* body and heading text */
  --muted: #5C5650;       /* help text, timestamps, labels (6.7:1 on --bg) */
  --line: #E4DCD3;        /* decorative hairlines */
  --accent: #2B2523;      /* primary buttons: charcoal, never maroon or gold */
  --accent-ink: #FFFFFF;  /* text on --accent */
  --ok: #0B6B63;          /* complete */
  --warn: #7A5300;        /* due soon */
  --stop: #9A3412;        /* past due */
  --info: #1F5FAE;        /* in progress */
  --chip: #EFEBE6;        /* not started / neutral chip wash */
  --radius: 8px;
  /* Logo heights: the style studio's wide logo on the sign-in page and in the menu (Tony's ticket #17). */
  --logo-front: 64px;
  --logo-bar: 40px;
  --logo-space-above: 0px;
  --logo-space-below: 0px;
  /* The sign-in panel's district name and small logo (Tony's tickets #20 and #21); the logo's own default adjusts to the screen's height. */
  --district-name-size: 18px;
  --district-logo-height: 52px;
  /* The sign-in panel's wash over its background (Tony's ticket #22): off until the style studio sets a strength above 0. */
  --panel-wash: #000000;
  --panel-wash-2: #000000;
  --panel-wash-alpha: 0%;
  --gutter: 16px;

  /* New: status washes and the neutral ink (chips pair ink + wash) */
  --ok-wash: #DFF1EE;
  --warn-wash: #F8EED6;
  --stop-wash: #FBE9E0;
  --info-wash: #E3EDF8;
  --neutral: #5C5650;

  /* New: links and focus (links are blue, separate from --accent) */
  --link: #1F5FAE;
  --link-hover: #174A87;
  --focus: #1F5FAE;
  --line-strong: #8C8078; /* input borders, meaningful boundaries */

  /* New: the left menu (rail). Fixed in every theme. */
  --rail: #7A1E2E;
  --on-rail: #FFFFFF;
  --on-rail-muted: #F3DDE1;
  --rail-hover: rgba(255, 255, 255, 0.10);
  --rail-active: #E2B13C;     /* "you are here" pill */
  --on-rail-active: #2B2523;
  --rail-focus: #FFFFFF;

  /* New: identity colors. Logo, rail, thin rules only. Never status. */
  --identity-maroon: #7A1E2E;
  --identity-gold: #E2B13C;

  /* New: type */
  --font-display: "Lexend", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", Verdana, system-ui, sans-serif;
  --text-body: 16px;   /* body minimum */
  --text-small: 14px;  /* floor: nothing on screen smaller */
  --text-h1: 28px;
  --text-h2: 21px;
  --text-h3: 18px;

  /* Added for the build: the rest of the rail, surfaces, overlays and the demonstration banner */
  --rail-hairline: rgba(255, 255, 255, 0.18);
  --rail-panel: linear-gradient(160deg, #8E2537 0%, #7A1E2E 45%, #5C1622 100%); /* sign-in brand panel */
  --surface-subtle: #F4EFE9;  /* table header fill, hovered rows */
  --overlay: rgba(34, 30, 26, 0.55);
  --shadow-raised: 0 1px 2px rgba(34, 30, 26, 0.08), 0 2px 8px rgba(34, 30, 26, 0.06);
  --shadow-overlay: 0 8px 32px rgba(34, 30, 26, 0.18);
  --notice: #F6E7C8;          /* the amber demonstration banner: never red */
  --notice-line: #E0C99B;
  --notice-ink: #5B3F12;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-letter: Georgia, "Times New Roman", serif;
  --font-signature: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;
  --text-label: 15px;
}

/* Dark: follows the device unless the page sets data-theme="light",
   and can be forced with data-theme="dark". The rail does not change. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="hc"]) {
    color-scheme: dark;
    --bg: #181514;
    --panel: #231F1D;
    --ink: #F3EEEA;
    --muted: #B9B1A9;
    --line: #3A3431;
    --line-strong: #7A706A; /* 3.4:1 on dark panels (WCAG 1.4.11; was #6F6560, 2.9:1) */
    --accent: #F3EEEA;
    --accent-ink: #1B1715;
    --ok: #6FD1C3;
    --warn: #E0A458;
    --stop: #F09A72;
    --info: #8DB8EE;
    --chip: #2E2A27;
    --ok-wash: #133230;
    --warn-wash: #3A2C14;
    --stop-wash: #3D2117;
    --info-wash: #1B2A3D;
    --neutral: #B9B1A9;
    --link: #8DB8EE;
    --link-hover: #B5D1F4;
    --focus: #8DB8EE;
    --surface-subtle: #2A2523;
    --overlay: rgba(0, 0, 0, 0.7);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181514;
  --panel: #231F1D;
  --ink: #F3EEEA;
  --muted: #B9B1A9;
  --line: #3A3431;
  --line-strong: #7A706A; /* 3.4:1 on dark panels (WCAG 1.4.11; was #6F6560, 2.9:1) */
  --accent: #F3EEEA;
  --accent-ink: #1B1715;
  --ok: #6FD1C3;
  --warn: #E0A458;
  --stop: #F09A72;
  --info: #8DB8EE;
  --chip: #2E2A27;
  --ok-wash: #133230;
  --warn-wash: #3A2C14;
  --stop-wash: #3D2117;
  --info-wash: #1B2A3D;
  --neutral: #B9B1A9;
  --link: #8DB8EE;
  --link-hover: #B5D1F4;
  --focus: #8DB8EE;
  --surface-subtle: #2A2523;
  --overlay: rgba(0, 0, 0, 0.7);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-overlay: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Added for the build: high contrast, chosen in the display menu or when the system asks for more contrast. Black ground,
   white ink, yellow focus, solid lines, no washes or shadows. The rail stays maroon with white inks. */
:root[data-theme="hc"] {
  color-scheme: dark;
  --bg: #000000;
  --panel: #000000;
  --ink: #FFFFFF;
  --muted: #E8E8E8;
  --line: #FFFFFF;
  --line-strong: #FFFFFF;
  --accent: #FFFFFF;
  --accent-ink: #000000;
  --ok: #46FF9E;
  --warn: #FFD400;
  --stop: #FF9E66;
  --info: #7FD4FF;
  --chip: #000000;
  --ok-wash: #000000;
  --warn-wash: #000000;
  --stop-wash: #000000;
  --info-wash: #000000;
  --neutral: #D0D0D0;
  --link: #9FD8FF;
  --link-hover: #FFFFFF;
  --focus: #FFD400;
  --surface-subtle: #1C1C1C;
  --overlay: rgba(0, 0, 0, 0.9);
  --shadow-raised: none;
  --shadow-overlay: none;
  --on-rail-muted: #FFFFFF;
  --rail-hairline: #FFFFFF;
  --rail-focus: #FFD400;
  --notice: #000000;
  --notice-line: #FFD400;
  --notice-ink: #FFFFFF;
}

/* Added for the build: color-blind friendly status inks (Okabe-Ito hues), chosen in the display menu. */
:root[data-vision="cvd"] { --ok: #005A8C; --info: #7A3A6B; --warn: #6E5A00; --stop: #A3400A; }
:root[data-vision="cvd"][data-theme="dark"] { --ok: #6CC0F0; --info: #E3A6D6; --warn: #E8D36A; --stop: #F5A06A; }
@media (prefers-color-scheme: dark) {
  :root[data-vision="cvd"]:not([data-theme="light"]):not([data-theme="hc"]) { --ok: #6CC0F0; --info: #E3A6D6; --warn: #E8D36A; --stop: #F5A06A; }
}

/* Added for the build: paper for letters and documents shown as they will print. White paper and near-black ink in every theme. */
:root { --paper: #FFFFFF; --paper-ink: #111111; }