/* ==========================================================================
   ACA design tokens
   Single source of truth for colour, shape, spacing, type and layout values.
   Loaded first by printCSSHeader(); every other ACA stylesheet consumes these
   custom properties and must not hard-code brand colours or sizes.
   ========================================================================== */

:root {
    /* --- Brand ---------------------------------------------------------- */
    --aca-orange: #f37d21;
    --aca-orange-strong: #c2410c;
    --aca-orange-ink: #9a3412;
    --aca-orange-soft: #fff4e8;
    --aca-orange-line: #fed7aa;
    --aca-green: #11733a;
    --aca-green-strong: #0b5229;
    --aca-green-soft: #e6f3eb;
    --aca-green-line: #b7dfc2;
    /* The CHROME - the navbar, the menus, the tab bar and sidebar, the page bands
       and the footer: the school's navy (owner, 2026-09-21: "the shades of dark
       blue, but never black"). --aca-chrome-2 is its raised shade (a hover, a
       pill), and the -on- set is what is drawn on it: white text, a blue-grey
       second line, and hairlines. Orange is the counterpart: the chosen item, the
       marks and the lattice wear it. */
    --aca-chrome: #05293f;
    --aca-chrome-2: #0b3a57;
    --aca-on-chrome: #ffffff;
    --aca-on-chrome-muted: #b9cbd8;
    --aca-on-chrome-line: rgba(255, 255, 255, .14);
    /* Text and hairlines on ANY filled brand or accent surface (a coloured card
       header, a modal header): translucent white, so the one set reads on navy,
       green, orange and bronze alike. --aca-on-chrome-* stay for the chrome. */
    --aca-on-brand-muted: rgba(255, 255, 255, .8);
    --aca-on-brand-line: rgba(255, 255, 255, .34);
    --aca-on-brand-soft: rgba(255, 255, 255, .16);
    /* An eight-point star lattice, the brand's one decoration. It is a MASK, not
       a picture: whatever uses it paints a token colour through it
       (background-color + mask-image), so the pattern has no colour of its own.
       Two paints, one motif: ORANGE on every navy surface - the chrome (navbar,
       menus, sidebar), the page bands, the footer and, faintly, the page ground
       (aca-shell.css section 1) - and WHITE on a coloured card or modal header. */
    --aca-pattern-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='14' y='14' width='28' height='28'/%3E%3Crect x='14' y='14' width='28' height='28' transform='rotate(45 28 28)'/%3E%3Cpath d='M0 28h8.2M47.8 28H56M28 0v8.2M28 47.8V56'/%3E%3C/g%3E%3C/svg%3E");

    /* --- Neutrals ------------------------------------------------------- */
    /* Warm, not grey: the page ground is sand, a card is parchment-white and the
       hairlines are the sand a shade deeper, so nothing on the site is plain
       white against plain grey. */
    --aca-ink: #1f2937;
    --aca-ink-strong: #111827;
    --aca-muted: #6b7280;
    --aca-muted-strong: #4b5563;
    --aca-line: #e0d6c2;
    --aca-line-strong: #cbbea5;
    --aca-surface: #fdf9f1;
    --aca-surface-2: #f3ecdf;
    /* The page ground is a deep BLUE a step lighter than the chrome, so the
       parchment cards sit on it like paper, the navy chrome still reads as chrome
       at the edges, and the ground never reads as black (owner, 2026-09-21: the
       shades of dark blue, never black - the earlier #031624 did). Everything
       painted DIRECTLY on it reads through the context tokens below, never
       through --aca-ink. */
    --aca-bg: #0d3149;
    /* Foreground for text/icons sitting on a filled brand or status surface. */
    --aca-on-brand: #ffffff;

    /* --- Status --------------------------------------------------------- */
    --aca-info: #0e7490;
    --aca-info-soft: #e6f6f9;
    --aca-info-line: #b6e3ec;
    --aca-warning: #b45309;
    --aca-warning-soft: #fff7e6;
    --aca-warning-line: #fde3b0;
    --aca-danger: #b42318;
    --aca-danger-soft: #fdecec;
    --aca-danger-line: #f6c9c5;
    --aca-success: var(--aca-green);
    --aca-success-soft: var(--aca-green-soft);
    /* The office-only scholarship pill (.aca-status--scholarship): a pill on a
       light card, not a surface, so it has no registry entry. */
    --aca-scholarship: var(--aca-accent-course);
    --aca-scholarship-soft: #e7f1ef;

    /* --- Entity accents (replace the old six gradients) ------------------
       Drawn from the tilework palette the navy and the orange belong to - the
       cool side lifts the navy towards teal and sea-green, the warm side runs
       from terracotta to bronze - so the card headers they colour sit with the
       chrome instead of shouting over it (owner, 2026-09-20: no bold blue, no
       grass green, no purple). Each is dark enough for a white title. */
    --aca-accent-family: #2b5d85;
    --aca-accent-family-strong: #1f4f73;
    --aca-accent-family-soft: #e9f0f6;
    --aca-accent-course: #0f6b60;
    --aca-accent-book: var(--aca-orange);
    --aca-accent-staff: var(--aca-info);
    --aca-accent-file: #625b52;
    --aca-accent-transaction: #8c5f12;

    /* --- Shape ---------------------------------------------------------- */
    /* --aca-radius-sm is for controls (buttons, inputs, chips' squarer cousins);
       --aca-radius is EVERY panel and card - a card, a modal, a page band, a tile,
       a sheet - and --aca-radius-lg resolves to the same value on purpose (owner
       rule 2026-09-21: no sharp corners, one roundness for all panels and their
       cards). Never a literal radius in a page sheet. */
    --aca-radius-sm: 8px;
    --aca-radius: 14px;
    --aca-radius-lg: var(--aca-radius);
    --aca-radius-pill: 999px;
    --aca-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --aca-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 6px 18px rgba(15, 23, 42, .06);
    --aca-shadow-lg: 0 10px 30px rgba(15, 23, 42, .12);
    /* --aca-shadow inverted, for a bar that sits at the bottom edge of the
       screen and has to lift off the content ABOVE it (the store action bar). */
    --aca-shadow-up: 0 -1px 2px rgba(15, 23, 42, .05), 0 -6px 18px rgba(15, 23, 42, .06);

    /* --- Spacing -------------------------------------------------------- */
    --aca-space-1: 4px;
    --aca-space-2: 8px;
    --aca-space-3: 12px;
    --aca-space-4: 16px;
    --aca-space-5: 24px;
    --aca-space-6: 32px;

    /* --- Layout --------------------------------------------------------- */
    --aca-navbar-h: 56px;
    /* Height of the .aca-tabbar: a bottom bar <= 991px, the same nav as a left
       rail from 992px up, where it is --aca-tabbar-w wide instead. */
    --aca-tabbar-h: 56px;
    /* The portal tab bar as a sidebar (from 992px), wide enough that the office's
       phone number and email address each fit on one line in its foot. */
    --aca-tabbar-w: 17rem;
    --aca-sidebar-w: 360px;
    /* Wide enough that the phone menu's close button clears the brand name. */
    --aca-drawer-w: min(360px, 92vw);
    /* The .aca-bar track (aca-base.css 12b): a figure's bar, and the thin one
       under a score row. */
    --aca-bar-h: 10px;
    --aca-bar-h-thin: 4px;
    /* EVERY tick box on the site (aca-forms.css section 12 and the option cards
       of section 5): one size, and the white marks drawn inside a ticked box -
       the tick, and the dash of a half-ticked "select all". */
    --aca-tick: 1.25rem;
    --aca-tick-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 14h5V4' fill='none' stroke='%23fff' stroke-width='2' transform='rotate(45 10 9.5)'/%3E%3C/svg%3E");
    --aca-tick-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E");

    /* --- Type ----------------------------------------------------------- */
    --aca-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --aca-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    /* The smallest text on the site is the BODY size: nothing renders below 16px.
       "small" and "extra small" both resolve to it, so the type scale has no step
       under the body - hierarchy below a heading comes from weight, colour and
       case, never from a smaller size (owner rule 2026-09-21, after 14px and then
       15px still read as small on a phone). */
    --aca-text-xs: 1rem;
    --aca-text-sm: 1rem;
    --aca-text: 1rem;
    --aca-text-lg: 1.125rem;
    --aca-text-xl: 1.375rem;
    --aca-text-2xl: 1.75rem;

    /* --- Misc ----------------------------------------------------------- */
    --aca-focus: 0 0 0 3px rgba(243, 125, 33, .35);
    --aca-transition: .15s ease;

    /* --- Z-index ladder -------------------------------------------------
       Bootstrap keeps .modal (1050) and .modal-backdrop (1040); the navbar
       deliberately sits BELOW the backdrop so modals dim the whole chrome. */
    --aca-z-rail: 1020;
    --aca-z-navbar: 1030;
    --aca-z-drawer: 1035;
    --aca-z-toast: 1080;

    /* --- Context tokens (light defaults) ----------------------------------
       What text and the quiet controls look like ON THE SURFACE THEY SIT ON.
       A rule that colours something that may sit directly on the page ground
       or on the chrome / a coloured band reads these, never --aca-ink or --aca-muted;
       the dark surfaces below re-declare them, and every light surface resets
       them. Inside a card the values are exactly the ink / muted / orange-ink
       they replace. */
    --aca-fg: var(--aca-ink);
    --aca-fg-strong: var(--aca-ink-strong);
    --aca-fg-muted: var(--aca-muted);
    --aca-fg-muted-strong: var(--aca-muted-strong);
    --aca-fg-line: var(--aca-line);
    --aca-fg-link: var(--aca-orange-ink);
    --aca-fg-link-hover: var(--aca-orange-strong);
    --aca-fg-accent: var(--aca-orange-strong);
    --aca-fg-green: var(--aca-green);
    --aca-ghost-line: var(--aca-line-strong);
    --aca-ghost-fg: var(--aca-muted-strong);
    --aca-ghost-bg: var(--aca-surface-2);
    --aca-ghost-chip-bg: var(--aca-surface);
    --aca-ghost-active-bg: var(--aca-orange-soft);
    --aca-ghost-active-line: var(--aca-orange);
    --aca-ghost-active-fg: var(--aca-orange-ink);
    --aca-ghost-danger-bg: transparent;
    --aca-ghost-danger-line: var(--aca-danger);
    /* The ring round a tick box: none on a light surface, light on a dark band,
       where a ticked box's orange would otherwise sink into the navy or bronze. */
    --aca-tick-ring: transparent;
}

/* --- Surface registry -------------------------------------------------------
   ONE list of the light surfaces and ONE list of the dark ones. A new light
   box that can sit on the page ground (a card, a panel, a pill with its own
   light fill) is added to the first list; a new chrome or accent band to the
   second. Nothing else declares these tokens. The dark list comes last so a
   band inside a light surface (a card's header, a modal's header) wins. */

.aca-card,
.card,
.modal-content,
.aca-table-wrap,
.aca-tabs-container,
.aca-toast,
.aca-drawer,
.alert,
.dropdown-menu,
.list-group,
.popover,
.family-tile,
.family-help,
.family-viewas,
.staff-attendance__state,
.staff-attendance__counts,
.fh-section--alt,
.fh-card,
.fh-facts,
.fh-teaser-card,
.fh-form-card,
.fh-empty,
.fh-chipbar,
.fh-policy,
.fh-forms-intro,
.fh-nextup-line,
.home-strip,
.home-subject,
.home-about__facts,
.home-hero__chip,
.flow-panels-container,
.login-card,
.aca-cal__nextup,
.aca-cal__months,
.aca-cal__grid,
.files-card,
.aca-actionbar,
.aca-option__text {
    --aca-fg: var(--aca-ink);
    --aca-fg-strong: var(--aca-ink-strong);
    --aca-fg-muted: var(--aca-muted);
    --aca-fg-muted-strong: var(--aca-muted-strong);
    --aca-fg-line: var(--aca-line);
    --aca-fg-link: var(--aca-orange-ink);
    --aca-fg-link-hover: var(--aca-orange-strong);
    --aca-fg-accent: var(--aca-orange-strong);
    --aca-fg-green: var(--aca-green);
    --aca-ghost-line: var(--aca-line-strong);
    --aca-ghost-fg: var(--aca-muted-strong);
    --aca-ghost-bg: var(--aca-surface-2);
    --aca-ghost-chip-bg: var(--aca-surface);
    --aca-ghost-active-bg: var(--aca-orange-soft);
    --aca-ghost-active-line: var(--aca-orange);
    --aca-ghost-active-fg: var(--aca-orange-ink);
    --aca-ghost-danger-bg: transparent;
    --aca-ghost-danger-line: var(--aca-danger);
    --aca-tick-ring: transparent;
    color: var(--aca-fg);
}

#mainBodyDiv,
.aca-navbar,
.aca-offcanvas,
.aca-tabbar,
.aca-card__header,
.card > .card-header,
.modal-header,
.aca-page-header,
.family-hero,
.fh-hero,
.fh-footer,
.home-hero,
.login-container {
    --aca-fg: var(--aca-on-chrome);
    --aca-fg-strong: var(--aca-on-chrome);
    --aca-fg-muted: var(--aca-on-brand-muted);
    --aca-fg-muted-strong: var(--aca-on-brand-muted);
    --aca-fg-line: var(--aca-on-chrome-line);
    --aca-fg-link: var(--aca-orange-line);
    --aca-fg-link-hover: var(--aca-on-brand);
    --aca-fg-accent: var(--aca-orange-line);
    --aca-fg-green: var(--aca-green-line);
    --aca-ghost-line: var(--aca-on-brand-line);
    --aca-ghost-fg: var(--aca-on-brand);
    --aca-ghost-bg: var(--aca-on-brand-soft);
    --aca-ghost-chip-bg: var(--aca-on-brand-soft);
    --aca-ghost-active-bg: var(--aca-on-brand);
    --aca-ghost-active-line: var(--aca-on-brand);
    --aca-ghost-active-fg: var(--aca-chrome);
    --aca-ghost-danger-bg: var(--aca-on-brand);
    --aca-ghost-danger-line: var(--aca-on-brand);
    --aca-tick-ring: var(--aca-on-brand);
    color: var(--aca-fg);
}

@media (max-width: 991px) {
    :root {
        --aca-navbar-h: 60px;
    }
}

/* Paper is white, whatever the print dialog's "Background graphics" says: the
   two surface tokens fill every card, tile, table and footer, and the ground
   token the page and any wrapper painted with it (the store's), so turning the
   three white empties every sheet's parchment and ground at once. The ink is
   black, its second line and its quiet outlines grey: --aca-print-* exist on
   paper only, where aca-base.css section 13 inks the text, the bands and the
   context tokens with them. The two line tokens follow them, so every rule,
   divider and table line prints neutral grey instead of the parchment's tan.
   The bands, the pane and the ink's rules are aca-base.css section 13's and
   aca-shell.css section 7's. */
@media print {
    :root {
        --aca-surface: #ffffff;
        --aca-surface-2: #ffffff;
        --aca-bg: #ffffff;
        --aca-print-ink: #000000;
        --aca-print-ink-muted: #4b5563;
        --aca-print-line: #d1d5db;
        --aca-print-line-strong: #9ca3af;
        --aca-line: var(--aca-print-line);
        --aca-line-strong: var(--aca-print-line-strong);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}