/* ==========================================================================
   THE BRAND BAR - one header for the landing page and the portal
   --------------------------------------------------------------------------
   The administrative navbar is steel blue (#316888, custom.css), the landing
   page wore a near-black teal glass and the portal a third dark slate - three
   headers for one school. Both public faces now read their bar from here, on
   the administrative steel, with the school's cyan (#06bbcc) as the one accent:
   the active link, the thread of light along the bottom edge, the focus ring.

   Loaded by `portal/index.blade.php` (the landing page) and
   `portal/layout.blade.php` (the portal) ahead of their own stylesheets, which
   consume these tokens and never restate the colours.
   ========================================================================== */

:root {
    /* The pair. */
    --brand-bar-steel: #316888;
    --brand-bar-cyan: #06bbcc;

    /* Steps on the steel's own hue: the dropdowns and the mobile menu sit one step
       deeper than the bar, so a panel opened from it reads as part of it. */
    --brand-bar-steel-light: #3a7797;
    --brand-bar-steel-deep: #26546f;
    --brand-bar-steel-deeper: #1c4359;

    /* Cyan for text and icons on the steel. The pure cyan is 2.6:1 there, too low for a
       subtitle; this tint of it is 4.7:1. */
    --brand-bar-cyan-text: #9ff0f6;

    /* Ink for text on a cyan fill - white on #06bbcc is 2.3:1, this is 6:1. */
    --brand-bar-ink: #08303f;

    --brand-bar-text: #e4f2f7;

    /* The bar. Steel throughout, so its edges match the administrative navbar exactly;
       the cyan rises as light from behind the middle of the top edge rather than as a
       second colour band. */
    --brand-bar-bg:
        radial-gradient(70% 170% at 50% -70%, rgb(6 187 204 / 26%), transparent 72%),
        linear-gradient(180deg, var(--brand-bar-steel-light) 0%, var(--brand-bar-steel) 55%, #2d6282 100%);

    /* The thread of light along the bottom edge. */
    --brand-bar-thread: linear-gradient(90deg, transparent 0%, var(--brand-bar-cyan) 18%, #7fe8f0 50%, var(--brand-bar-cyan) 82%, transparent 100%);
    --brand-bar-thread-glow: 0 0 14px rgb(6 187 204 / 70%);

    --brand-bar-shadow: 0 6px 24px rgb(20 52 72 / 28%);
    --brand-bar-shadow-raised: 0 12px 32px rgb(20 52 72 / 38%);

    /* Glass controls on the bar - icon buttons, the account trigger, a hovered link. */
    --brand-bar-glass: rgb(255 255 255 / 10%);
    --brand-bar-glass-hover: rgb(255 255 255 / 16%);
    --brand-bar-glass-line: rgb(255 255 255 / 22%);

    /* The active link: a cyan pill with ink text, lit from below by its own colour. */
    --brand-bar-active-shadow: 0 6px 18px rgb(6 187 204 / 42%), inset 0 0 0 1px rgb(255 255 255 / 30%);

    /* Panels opened from the bar. */
    --brand-bar-panel: rgb(38 84 111 / 98%);
    --brand-bar-panel-line: rgb(6 187 204 / 32%);
    --brand-bar-panel-hover: rgb(6 187 204 / 22%);

    /* Sign-out, on the bar's steel. A red that reads on a dark ground is a different colour
       from the portal's rose, which was picked to read on white - so it lives here with the
       bar rather than in the portal's palette. */
    --brand-bar-danger: #ff9e8c;
    --brand-bar-danger-hover: #ffc6bb;
    --brand-bar-danger-wash: rgb(255 99 71 / 20%);
}

/* The banner an inner portal page opens on, directly under the bar
   (`portal.partials.hero-header`): the bar's steel running out into the cyan, so the bar and
   the banner read as one pair rather than two blues and a green. The home band wore it too
   until 2026-10-17, when the school asked for that band white. */
:root {
    --brand-aurora: linear-gradient(135deg, var(--brand-bar-steel) 0%, #1c93ad 50%, var(--brand-bar-cyan) 100%);
    --brand-aurora-shadow: 0 24px 50px -18px rgb(6 187 204 / 42%), 0 8px 20px -8px rgb(20 52 72 / 24%);
}

/* Text written straight onto the bar's steel, outside any card - the footer. The page itself
   is white (`--portal-bg` in portal/dashboard.css); the steel backdrop that once ran down
   behind the cards is gone, so nothing on the page proper reads these. */
:root {
    --brand-on-backdrop: #ffffff;
    --brand-on-backdrop-muted: rgb(228 242 247 / 80%);
}