/* eavu-theme.css
 *
 * Three-layer color architecture for EAVU:
 *
 *   Layer 1 — PALETTE          What's the actual color (literal hex/rgb)
 *   Layer 2 — ROLES            What does this color do (semantic role names)
 *   Layer 3 — DERIVATIONS      Computed shifts (hovers, tints) from Layer 2
 *
 * COMPONENT CSS RULE: only reference Layer 2 / Layer 3 vars. Never go directly
 * to a Layer 1 palette name. That's how we get the ability to reskin (customer
 * rebrand, light/dark mode, accessibility tweaks) by editing this one file.
 *
 * Loaded site-wide from Web/Portal/Views/Shared/_Layout.cshtml.
 */

:root {
    /* ============================================================
       LAYER 1 — PALETTE
       Literal values. Each has ONE name describing what the color
       IS (not what it does). Replace these when the customer rebrands.
       ============================================================ */

    /* Client palette — from EAVU brand book (rm 68503 ticket) */
    --client-warm-white: #FFFBF6;       /* PMS 9285 C */
    --client-light-gray: #E5E0D5;       /* PMS Warm Gray 1C */
    --client-ice-blue:   #B6D3DF;       /* PMS 290 C */
    --client-warm-gray:  #988E85;       /* PMS Warm Gray 6C */
    --client-ea-blue:    #051D4B;       /* PMS 281 C — the brand primary */
    --client-dark-gray:  #6A635D;       /* PMS Warm Gray 10C */

    /* Additional colors used in client mockups (rm 68503). Names are placeholders
       until the client's full branding project lands (within the next few weeks
       per Shari) and gives us authoritative names. */
    --client-mid-blue:   #8DACC0;       /* darker complement to ice-blue; name TBD */
    --client-cream:      #F9F7F3;       /* warm near-white; name TBD */
    --client-cool-white: #F4F6F8;       /* cool near-white; name TBD */
    --client-pearl:      #FDFCFB;       /* very warm near-white (close to warm-white but distinct); name TBD */
    --client-bone:       #F1EFE9;       /* warm off-white (close to cream but slightly deeper); name TBD */
    --client-pale-sky:   #C3DCE7;       /* paler than ice-blue; name TBD */

    /* Pinpoint palette (placeholder for status/system colors not from client
       brand). None used today; add here when needed.
       Example: --pinpoint-status-error: #cc3333; */


    /* ============================================================
       LAYER 2 — ROLES
       Names describe role, not color. Edit a single line to change
       what color a given role uses. Light/dark mode would override
       this layer in a media query (Layer 1 stays the same).
       ============================================================ */

    /* Text */
    --client-text-primary:        var(--client-ea-blue);   /* main text + headings */
    --client-text-meta:           var(--client-dark-gray); /* secondary, meta info, completion-status */
    --client-text-on-primary:     white;                   /* text on primary-colored bg, e.g. button labels */

    /* Backgrounds */
    --client-page-bg:             var(--client-warm-white);  /* page-level background */
    --client-section-bg:          white;                     /* card / section background */
    --client-section-bg-tinted:   var(--client-light-gray);  /* subtle alternate section bg */

    /* Interactive */
    --client-link-color:          var(--client-ea-blue);
    --client-button-primary-bg:   var(--client-ea-blue);
    --client-button-primary-fg:   var(--client-text-on-primary);

    /* Borders */
    --client-border-subtle:       var(--client-light-gray);  /* faint boundary lines */
    --client-border-strong:       var(--client-warm-gray);   /* stronger boundary lines */

    /* Decorative gradients (rm 68503, from client mockups).
       No solid fallbacks — gradients are universally supported. A solid
       background underneath any of these is fine if the gradient uses
       semi-transparent stops, but that's composition, not a fallback. */
    --client-gradient-light-gray: linear-gradient(
        98deg,
        var(--client-light-gray) 0%,
        white 25%,
        var(--client-light-gray) 100%
    );
    --client-gradient-ice-blue: radial-gradient(
        99.57% 98.37% at 27.86% 7.87%,
        white 0%,
        var(--client-ice-blue) 73.76%,
        var(--client-mid-blue) 100%
    );
    --client-gradient-off-white: radial-gradient(
        77.24% 174.03% at 16.72% 0%,
        white 13.94%,
        var(--client-cream) 54.75%,
        var(--client-cool-white) 100%
    );
    --client-gradient-white-blue: radial-gradient(
        80.58% 100% at 15.25% 0%,
        var(--client-pearl) 0%,
        var(--client-bone) 33.65%,
        var(--client-pale-sky) 100%
    );


    /* ============================================================
       LAYER 3 — DERIVATIONS
       Computed shifts from Layer 2. Auto-update when Layer 2 changes.
       Uses CSS color-mix() — supported in all modern browsers since
       early 2024. EAVU has no IE/legacy support requirement.
       ============================================================ */

    /* Hover shades — slightly lighter than the base (mixed with white) */
    --client-link-hover:                color-mix(in srgb, var(--client-link-color) 85%, white);
    --client-button-primary-hover-bg:   color-mix(in srgb, var(--client-button-primary-bg) 85%, white);

    /* Subtle primary tint — semi-transparent primary for backgrounds and
       hover-row highlights. Use where you'd previously hardcode rgba(...). */
    --client-prominent-tint:            color-mix(in srgb, var(--client-button-primary-bg) 4%, transparent);
    --client-link-tint-30:              color-mix(in srgb, var(--client-link-color) 30%, transparent);
}