/* ============================================================================
   portal-applicant.css — BLUE.

   Load after tokens.css on every applicant-facing page: the public
   notification pages, registration, sign-in, and the applicant dashboard.

   This file does one job: bind the neutral --brand-* slots to the blue ramp.
   No component rules belong here. If a rule would apply to a specific block
   on a specific page, it goes in components.css or a page file instead.
   ========================================================================== */

:root {
    /* Blue ramp, deep to light. --brand is the primary: buttons, links,
       focus rings, active states. --brand-deep anchors gradients and the
       utility bar. --brand-soft / --brand-line are the tinted surfaces used
       for callouts, chips and the declaration blocks. */
    --brand-deep: #0a2540;
    --brand-dark: #123d68;
    --brand: #1a5c96;
    --brand-bright: #2d7fc4;
    --brand-soft: #eaf2fa;
    --brand-line: #c7ddf0;

    /* Text that sits on a brand-coloured surface. */
    --on-brand: #ffffff;
    --on-brand-soft: #d6e6f5;

    /* Brand-tinted elevation so shadows feel part of the palette. */
    --shadow-card: 0 14px 40px rgba(10, 37, 64, .10);
    --shadow-soft: 0 10px 30px rgba(10, 37, 64, .08);
    --shadow-cta: 0 6px 20px rgba(10, 37, 64, .30);

    /* Ready-made gradients; keep both portals using the same two stops so the
       two halves of the system stay visually related. */
    --brand-gradient: linear-gradient(135deg, var(--brand-deep), var(--brand));
    --brand-gradient-wide: linear-gradient(120deg, var(--brand-deep), var(--brand) 70%, var(--brand-bright));

    /* Translucent overlays used over hero photography. */
    --hero-veil: linear-gradient(100deg, rgba(10, 37, 64, .62) 0%, rgba(18, 61, 104, .38) 45%, rgba(10, 37, 64, .10) 100%);
    --focus-ring: 0 0 0 3px rgba(26, 92, 150, .16);
}