/*
 * Brand tokens — 720 Credit Score
 *
 * Single source of truth for brand color and type. Loaded first; every other
 * plugin stylesheet declares this as a dependency, so these resolve everywhere.
 *
 * Palette taken from the 720CS21 theme stylesheet
 * (/wp-content/themes/720CS21/assets/styles/style.css):
 *   .blueButton #7eb5e0 · .redButton #dd5959 · link hover #ca0000
 *   #topSection #ffffff · footer.footer #000000 · .tabs-title #e8e6d8
 *
 * Note on --eg-primary: the theme's button blue (#7eb5e0) is ~2.0:1 against
 * white text, well under WCAG AA. On a card-entry form that costs conversions,
 * so buttons use the theme's deeper blue #14679e (5.9:1) and #7eb5e0 is
 * demoted to a decorative fill at --eg-brand-300.
 */

:root {
    /* ---- brand ramp ---- */
    --eg-brand-50:  #f2f8fc;
    --eg-brand-100: #dceffa;
    --eg-brand-200: #cadeed;
    --eg-brand-300: #a8cce6;
    --eg-brand-400: #7eb5e0;
    --eg-brand-500: #1779ba;
    --eg-brand-600: #14679e;
    --eg-brand-700: #115887;
    --eg-brand-800: #0e4a70;
    --eg-brand-900: #0e3d5c;

    /* ---- semantic roles ---- */
    --eg-primary:          var(--eg-brand-600);
    --eg-primary-hover:    var(--eg-brand-700);
    --eg-primary-contrast: #ffffff;
    --eg-accent:           #dd5959;   /* 720 .redButton — sign-up CTA */
    --eg-accent-hover:     #ca0000;
    --eg-link:             var(--eg-brand-600);
    --eg-link-hover:       #ca0000;
    --eg-slate:            #435b73;

    /* ---- dark chrome (banker portal header, footers) ---- */
    --eg-chrome-bg:      #000000;
    --eg-chrome-bg-dark: #0d0d0d;
    --eg-chrome-fg:      #ffffff;

    /* ---- surfaces & neutrals ---- */
    --eg-surface:     #ffffff;
    --eg-surface-alt: #f9fafb;
    --eg-panel:       #e8e6d8;   /* 720 .tabs-title cream */
    --eg-border:      #e5e7eb;
    --eg-text:        #111827;
    --eg-text-body:   #374151;
    --eg-text-muted:  #6b7280;

    --eg-gray-50:  #f9fafb;
    --eg-gray-100: #f3f4f6;
    --eg-gray-200: #e5e7eb;
    --eg-gray-300: #d1d5db;
    --eg-gray-400: #9ca3af;
    --eg-gray-500: #6b7280;
    --eg-gray-700: #374151;
    --eg-gray-900: #111827;

    /* ---- status ---- */
    --eg-success: #2e7d32;
    --eg-warning: #b56e10;
    --eg-danger:  #ca0000;   /* aligned to 720 brand red */
    --eg-info:    var(--eg-brand-600);

    /* ---- type ----
       The 720CS21 theme self-hosts these via @font-face, so we reference the
       family names only and ship no font files. Fallbacks cover the case of
       rendering outside the theme. */
    --eg-font-body:    ralewaymedium, 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --eg-font-bold:    ralewaybold, 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --eg-font-heading: oswald_regularregular, 'Oswald', Impact, 'Arial Narrow', sans-serif;
    --eg-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /*
     * ---- legacy aliases ----
     * The original palette shipped two separate and mutually inconsistent
     * token sets: --evergreen-* (enrollment form, brand #4A7856) and
     * --banker-* (portal, brand #4E9C4B). Roughly 76 var() call sites still
     * reference them. Mapping them onto the tokens above rebrands every one
     * of those without editing them individually.
     *
     * Safe to delete once all call sites are migrated to --eg-*.
     */
    --evergreen-50:  var(--eg-brand-50);
    --evergreen-100: var(--eg-brand-100);
    --evergreen-200: var(--eg-brand-200);
    --evergreen-300: var(--eg-brand-300);
    --evergreen-400: var(--eg-brand-400);
    --evergreen-500: var(--eg-brand-500);
    --evergreen-600: var(--eg-brand-600);   /* primary — form buttons land here */
    --evergreen-700: var(--eg-brand-700);
    --evergreen-800: var(--eg-brand-800);
    --evergreen-900: var(--eg-brand-900);

    --banker-primary:      var(--eg-chrome-bg);
    --banker-primary-dark: var(--eg-chrome-bg-dark);
    --banker-accent:       var(--eg-primary);
    --banker-accent-hover: var(--eg-primary-hover);
    --banker-success:      var(--eg-success);
    --banker-warning:      var(--eg-warning);
    --banker-danger:       var(--eg-danger);
    --banker-gray-50:      var(--eg-gray-50);
    --banker-gray-100:     var(--eg-gray-100);
    --banker-gray-200:     var(--eg-gray-200);
    --banker-gray-300:     var(--eg-gray-300);
    --banker-gray-500:     var(--eg-gray-500);
    --banker-gray-700:     var(--eg-gray-700);
    --banker-gray-900:     var(--eg-gray-900);
}