/**
 * fidelis-tokens.css
 * Fidelis Catholic Credit Union — Design Token System
 * Aligned to Blossom CMS (fideliscu.org) as source of truth.
 *
 * HOSTED AT: https://assets.fideliscu.org/css/fidelis-tokens.css
 *
 * ─── WHAT THIS FILE IS ───
 * Custom property declarations ONLY. It declares values but styles
 * nothing, so it is safe to load on ANY page — including inside a
 * Blossom CMS HTML block — with zero risk of restyling the template.
 *
 * ─── WHERE TO LOAD IT ───
 *   CMS HTML block (fideliscu.org)     → THIS FILE ONLY
 *   Standalone page (go.fideliscu.org) → this file + fidelis-base.css
 *
 * Element styles and the global reset live in fidelis-base.css.
 * Never load fidelis-base.css inside the CMS — it will restyle
 * Blossom's header, footer, and every other block on the page.
 *
 * ─── COLOR POLICY ───
 * Every color below is a Blossom value. No new colors are introduced.
 * Change a value in Blossom, change it here, and every page updates.
 * The one exception is the chartreuse accent, flagged inline.
 *
 * Last updated: 2026-08
 */


/* ============================================================
   BLOSSOM CMS TOKENS — verbatim from :root injection
   These match exactly what fideliscu.org renders.
   Blossom already injects these on its own pages; they are
   repeated here so go.fideliscu.org pages have them too.
   ============================================================ */

:root {

  /* — Color Scale — */
  --primaryColor:            #21578A;   /* Primary navy */
  --primary6Color:           #f3f6f9;   /* Near-white blue tint */
  --primary30Color:          #becedd;   /* Light blue — borders */
  --primary50Color:          #91acc5;   /* Mid blue — NOT a text color */
  --primary80Color:          #4e79a2;   /* Medium blue */
  --primary110Color:         #1e4f7d;   /* Dark blue — hover */
  --primary150Color:         #112c45;   /* Deep navy — footers */
  --primary180Color:         #07121c;   /* Near-black navy */

  --grayscale0Color:         #ffffff;
  --grayscale6Color:         #f0f0f0;
  --grayscale20Color:        #cccccc;
  --grayscale30Color:        #b2b2b2;
  --grayscale40Color:        #999999;
  --grayscale50Color:        #7f7f7f;
  --grayscale60Color:        #666666;
  --grayscale70Color:        #4c4c4c;
  --grayscale80Color:        #333333;
  --grayscale100Color:       #000000;

  --uialertColor:            #ea5050;
  --uialertfadedColor:       #fff8f8;
  --opacitygrayscale6Color:  rgba(0, 0, 0, 0.06);

  /* — Typography — */
  --primary-family:          "Barlow", sans-serif;
  --secondary-family:        "Ubuntu", sans-serif;
  --blossom-family:          "Merriweather", serif;

  /* — Layout — */
  --max-width-container:     1200px;
  --mobile-padding:          20px;
  --tablet-padding:          50px;
  --desktop-padding:         180px;


  /* ============================================================
     FIDELIS TOKENS — --fdl-* namespace
     Every value below points at a Blossom token above.
     ============================================================ */

  /* — Navy Scale — */
  --fdl-color-primary:       #21578A;   /* = --primaryColor */
  --fdl-color-primary-hover: #1e4f7d;   /* = --primary110Color */
  --fdl-color-primary-mid:   #1e4f7d;   /* = --primary110Color — headings on light bg */
  --fdl-color-primary-dark:  #112c45;   /* = --primary150Color */
  --fdl-color-primary-light: #f3f6f9;   /* = --primary6Color */

  /* — Surfaces — */
  --fdl-color-bg:            #ffffff;   /* = --grayscale0Color */
  --fdl-color-bg-subtle:     #f3f6f9;   /* = --primary6Color — blue-tinted wash */
  --fdl-color-surface:       #f0f0f0;   /* = --grayscale6Color — neutral panel */
  --fdl-color-bg-dark:       #21578A;   /* = --primaryColor */
  --fdl-color-bg-deeper:     #112c45;   /* = --primary150Color */

  /* — Lines & Borders — */
  --fdl-color-line:          #cccccc;   /* = --grayscale20Color — neutral rules, tables */
  --fdl-color-border:        #becedd;   /* = --primary30Color — blue-tinted card borders */

  /* — Text — */
  --fdl-color-text:          #333333;   /* = --grayscale80Color */
  --fdl-color-text-muted:    #666666;   /* = --grayscale60Color — 5.7:1 on white, 5.0:1 on surface */
  --fdl-color-text-inverse:  #ffffff;   /* = --grayscale0Color */
  --fdl-color-text-heading:  #21578A;   /* = --primaryColor */

  /* — Accent (chartreuse) — */
  /* The only value here that is NOT in Blossom's palette.
     2.4:1 on white — DECORATIVE ONLY. Underlines, rules, badge
     fills, icon strokes. Never text, never a large background. */
  --fdl-color-accent:        #cddb28;
  --fdl-color-accent-dark:   #b0bc1f;   /* hover state */

  /* — UI / Semantic — */
  --fdl-color-error:         #ea5050;   /* = --uialertColor */
  --fdl-color-error-bg:      #fff8f8;   /* = --uialertfadedColor */
  --fdl-color-success:       #2e7d32;
  --fdl-color-overlay:       rgba(7, 18, 28, 0.65);   /* = --primary180Color @ 65% */
  --fdl-color-focus:         #1e4f7d;   /* = --primary110Color — focus rings */

  /* — DEPRECATED —
     --fdl-color-muted is a LIGHT BLUE (2.3:1 on white), not a text
     color, and is one word away from --fdl-color-text-muted. Aliased
     for pages that already use it. Do not use it for text.
     Prefer --fdl-color-blue-muted going forward. */
  --fdl-color-blue-muted:    #91acc5;   /* = --primary50Color */
  --fdl-color-muted:         #91acc5;   /* DEPRECATED — use --fdl-color-blue-muted */

  /* — Typography — */
  --fdl-font-body:           "Barlow", sans-serif;      /* = --primary-family */
  /* Ubuntu and Merriweather are Blossom's fonts but are NOT loaded on
     standalone pages (fidelis-base.css requests only Barlow + EB Garamond).
     Each falls back to a font we do load, so nothing drops to a system
     default. On CMS pages Blossom loads them, so they resolve properly there. */
  --fdl-font-secondary:      "Ubuntu", "Barlow", sans-serif;        /* = --secondary-family */
  --fdl-font-serif:          "Merriweather", "EB Garamond", serif;  /* = --blossom-family */

  /* Display font for landing-page headlines. Deliberately NOT a Blossom
     font: body copy matches the CMS exactly (Barlow), headlines stay
     elevated. This is the only intentional divergence in the system. */
  --fdl-font-display:        "EB Garamond", Georgia, serif;
  /* EB Garamond & DM Sans retired from landing pages during the
     CMS-match phase. Reintroduce only with a deliberate divergence. */

  /* — Type Scale — */
  --fdl-text-xs:             0.75rem;    /* 12px */
  --fdl-text-sm:             0.875rem;   /* 14px */
  --fdl-text-base:           1.0625rem;  /* 17px — landing-page body */
  --fdl-text-lg:             1.1875rem;  /* 19px — lead paragraphs */
  --fdl-text-xl:             1.25rem;    /* 20px */
  --fdl-text-2xl:            1.5rem;     /* 24px */
  --fdl-text-3xl:            1.875rem;   /* 30px */
  --fdl-text-4xl:            2.25rem;    /* 36px */
  --fdl-text-5xl:            3rem;       /* 48px */

  /* — Font Weights — */
  --fdl-leading-body:        1.6;
  --fdl-leading-tight:       1.2;

  --fdl-weight-light:        300;
  --fdl-weight-regular:      400;
  --fdl-weight-medium:       500;
  --fdl-weight-semibold:     600;
  --fdl-weight-bold:         700;

  /* — Layout — */
  --fdl-max-width:           1200px;     /* = --max-width-container */
  --fdl-padding-mobile:      20px;       /* = --mobile-padding */
  --fdl-padding-tablet:      50px;       /* = --tablet-padding */
  --fdl-padding-desktop:     180px;      /* = --desktop-padding */

  /* — Spacing Scale — */
  --fdl-space-1:             0.25rem;
  --fdl-space-2:             0.5rem;
  --fdl-space-3:             0.75rem;
  --fdl-space-4:             1rem;
  --fdl-space-6:             1.5rem;
  --fdl-space-8:             2rem;
  --fdl-space-12:            3rem;
  --fdl-space-16:            4rem;
  --fdl-space-24:            6rem;

  /* — Border Radius — */
  --fdl-radius-sm:           4px;
  --fdl-radius-button:       12px;      /* measured on fideliscu.org buttons */
  --fdl-radius-card:         14px;      /* measured on fideliscu.org quick-link tiles */
  --fdl-radius-md:           8px;
  --fdl-radius-lg:           16px;
  --fdl-radius-pill:         9999px;

  /* — Shadows — */
  --fdl-shadow-sm:           0 1px 3px rgba(33, 87, 138, 0.10);
  --fdl-shadow-md:           0 4px 12px rgba(33, 87, 138, 0.15);
  --fdl-shadow-lg:           0 8px 32px rgba(33, 87, 138, 0.20);

  /* — Transitions — */
  --fdl-transition-fast:     150ms ease;
  --fdl-transition-base:     250ms ease;
  --fdl-transition-slow:     400ms ease;

  /* — Z-Index — */
  --fdl-z-base:              1;
  --fdl-z-dropdown:          100;
  --fdl-z-sticky:            200;
  --fdl-z-modal:             300;
  --fdl-z-toast:             9999;

}