/* ============================================================
   CFA DESIGN SYSTEM — DESIGN TOKENS
   Crowd for Angels Visual Identity

   Brand: Euston Securities Limited
   Fonts: DM Sans (body/headings), Outfit (logo only)
   Primary: Cobalt #2451D1 | Secondary: Amber #E8870A | Dark: Navy #1B2B6B
   Signature: Glass morphism cards with dual-color theming
   Breakpoints: 920px (tablet), 600px (mobile)

   Source: design-system/css/tokens.css
   Role in PHP platform: foundation token layer — loaded globally via layout.phtml

   Override any token in your project's CSS to re-theme:
   :root { --cfa-cobalt: #your-color; }
   ============================================================ */

:root {

  /* ── BRAND COLORS ── */
  --cfa-cobalt:             #2451D1;
  --cfa-cobalt-mid:         #3563E9;
  --cfa-cobalt-pale:        #EEF3FF;
  --cfa-cobalt-border:      #C7D7FB;
  --cfa-cobalt-link:        #93B4FF;

  --cfa-amber:              #E63946;
  --cfa-amber-hover:        #C92030;
  --cfa-amber-rgb:          230, 57, 70;   /* for rgba() usage: rgba(var(--cfa-amber-rgb), 0.3) */
  --cfa-amber-pale:         #FFF1F2;
  --cfa-amber-border:       #FECDD3;
  --cfa-amber-text:         #9F1239;

  --cfa-navy:               #1B2B6B;

  --cfa-green:              #059669;
  --cfa-green-pale:         #ECFDF5;
  --cfa-green-border:       rgba(5, 150, 105, 0.35);
  --cfa-green-text:         #065F46;

  --cfa-red:                #DC2626;
  --cfa-red-hover:          #B91C1C;
  --cfa-red-pale:           #FEF2F2;
  --cfa-red-border:         rgba(220, 38, 38, 0.40);
  --cfa-red-text:           #991B1B;

  /* ── SURFACES ── */
  --cfa-bg:                 #FFFFFF;
  --cfa-bg-soft:            #F4F6FB;
  --cfa-bg-section:         #EEF2FF;

  /* ── TEXT ── */
  --cfa-text:               #111827;
  --cfa-text-mid:           #374151;
  --cfa-text-muted:         #6B7280;

  /* ── BORDERS ── */
  --cfa-border:             #E5E7EB;
  --cfa-border-strong:      #D1D5DB;

  /* ── ON-DARK (navy backgrounds) ── */
  --cfa-on-dark:            #FFFFFF;
  --cfa-on-dark-mid:        rgba(255, 255, 255, 0.82);
  --cfa-on-dark-muted:      rgba(255, 255, 255, 0.60);
  --cfa-on-dark-subtle:     rgba(255, 255, 255, 0.35);
  --cfa-on-dark-faint:      rgba(255, 255, 255, 0.10);
  --cfa-on-dark-border:     rgba(255, 255, 255, 0.20);

  /* ── FONT FAMILIES ── */
  --cfa-font-body:          'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cfa-font-logo:          'Outfit', sans-serif;

  /* ── FONT SIZES ── */
  --cfa-text-xs:            13px;
  --cfa-text-sm:            14px;
  --cfa-text-base:          16px;
  --cfa-text-lg:            18px;
  --cfa-text-xl:            22px;
  --cfa-text-2xl:           24px;
  --cfa-text-3xl:           28px;
  --cfa-text-4xl:           34px;
  --cfa-text-5xl:           36px;
  --cfa-text-6xl:           40px;
  --cfa-text-7xl:           48px;

  /* ── RESPONSIVE HEADINGS (clamp) ── */
  --cfa-heading-hero:       clamp(48px, 5vw, 76px);
  --cfa-heading-section:    clamp(36px, 4vw, 56px);
  --cfa-heading-feature:    clamp(40px, 4.5vw, 64px);
  --cfa-heading-cta:        clamp(32px, 3.5vw, 50px);

  /* ── FONT WEIGHTS ── */
  --cfa-weight-normal:      400;
  --cfa-weight-medium:      500;
  --cfa-weight-semibold:    600;
  --cfa-weight-bold:        700;
  --cfa-weight-extrabold:   800;
  --cfa-weight-black:       900;

  /* ── LINE HEIGHTS ── */
  --cfa-leading-tight:      1.0;
  --cfa-leading-snug:       1.05;
  --cfa-leading-heading:    1.1;
  --cfa-leading-normal:     1.6;
  --cfa-leading-relaxed:    1.7;
  --cfa-leading-loose:      1.8;

  /* ── LETTER SPACING ── */
  --cfa-tracking-tight:     -0.04em;
  --cfa-tracking-snug:      -0.03em;
  --cfa-tracking-normal:    -0.02em;
  --cfa-tracking-wide:      0.02em;
  --cfa-tracking-wider:     0.06em;
  --cfa-tracking-widest:    0.1em;

  /* ── SPACING SCALE ── */
  --cfa-space-1:            4px;
  --cfa-space-2:            8px;
  --cfa-space-3:            12px;
  --cfa-space-4:            16px;
  --cfa-space-5:            20px;
  --cfa-space-6:            24px;
  --cfa-space-7:            28px;
  --cfa-space-8:            32px;
  --cfa-space-9:            40px;
  --cfa-space-10:           48px;
  --cfa-space-11:           52px;
  --cfa-space-12:           64px;
  --cfa-space-13:           80px;
  --cfa-space-14:           100px;
  --cfa-space-15:           120px;

  /* ── LAYOUT ── */
  --cfa-container-max:      1320px;
  --cfa-container-narrow:   900px;
  --cfa-container-pad:      48px;
  --cfa-container-pad-sm:   24px;

  /* ── BORDER RADIUS ── */
  --cfa-radius-sm:          8px;
  --cfa-radius-md:          10px;
  --cfa-radius-lg:          14px;
  --cfa-radius-xl:          16px;
  --cfa-radius-2xl:         20px;
  --cfa-radius-3xl:         24px;
  --cfa-radius-full:        100px;
  --cfa-radius-circle:      50%;

  /* ── SHADOWS ── */
  --cfa-shadow-sm:          0 4px 16px rgba(36, 81, 209, 0.08);
  --cfa-shadow-md:          0 8px 32px rgba(36, 81, 209, 0.08);
  --cfa-shadow-lg:          0 20px 48px rgba(36, 81, 209, 0.20);
  --cfa-shadow-xl:          0 24px 64px rgba(27, 43, 107, 0.12);
  --cfa-shadow-overlay:     0 8px 32px rgba(0, 0, 0, 0.12);
  --cfa-shadow-pill:        0 4px 30px rgba(0, 0, 0, 0.10);
  --cfa-shadow-amber:       0 4px 16px rgba(var(--cfa-amber-rgb), 0.30);
  --cfa-shadow-cobalt:      0 6px 20px rgba(36, 81, 209, 0.30);
  --cfa-shadow-join:        0 8px 40px rgba(36, 81, 209, 0.25);

  /* ── GLASS MORPHISM — COBALT ── */
  --cfa-glass-cobalt-bg:          linear-gradient(135deg, rgba(36, 81, 209, 0.10) 0%, rgba(36, 81, 209, 0.03) 100%);
  --cfa-glass-cobalt-border:      rgba(36, 81, 209, 0.40);
  --cfa-glass-cobalt-border-hover: rgba(36, 81, 209, 0.60);
  --cfa-glass-cobalt-shadow:      0 8px 32px rgba(36, 81, 209, 0.08);
  --cfa-glass-cobalt-shadow-hover: 0 20px 48px rgba(36, 81, 209, 0.20);

  /* ── GLASS MORPHISM — AMBER ── */
  --cfa-glass-amber-bg:           linear-gradient(135deg, rgba(var(--cfa-amber-rgb), 0.06) 0%, rgba(var(--cfa-amber-rgb), 0.02) 100%);
  --cfa-glass-amber-border:       rgba(var(--cfa-amber-rgb), 0.30);
  --cfa-glass-amber-border-hover: rgba(var(--cfa-amber-rgb), 0.50);
  --cfa-glass-amber-shadow:       0 8px 32px rgba(var(--cfa-amber-rgb), 0.06);
  --cfa-glass-amber-shadow-hover: 0 20px 48px rgba(var(--cfa-amber-rgb), 0.12);

  /* ── GLASS MORPHISM — DARK (on navy) ── */
  --cfa-glass-dark-bg:            linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
  --cfa-glass-dark-border:        rgba(255, 255, 255, 0.25);
  --cfa-glass-dark-shadow:        0 8px 32px rgba(0, 0, 0, 0.12);

  /* ── GLASS SHARED ── */
  --cfa-glass-blur:               blur(20px);
  --cfa-glass-inset:              inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --cfa-glass-dark-inset:         inset 0 1px 0 rgba(255, 255, 255, 0.20);

  /* ── TRANSITIONS ── */
  --cfa-transition-fast:          0.15s ease;
  --cfa-transition-normal:        0.2s ease;
  --cfa-transition-slow:          0.6s ease;

  /* ── Z-INDEX SCALE ── */
  --cfa-z-base:             1;
  --cfa-z-overlay:          2;
  --cfa-z-pill:             3;
  --cfa-z-nav:              10000;
  --cfa-z-toast:            300;

  /* ── DEPRECATED BRAND COLORS — FIX-09 ──
     Preserved for legacy template / designer.css compatibility.
     Do NOT use in new markup. These teal values pre-date the
     cobalt/amber rebrand and appear in ~20 inline styles and
     designer.css. Reference tokens only — no new usage. */
  --cfa-teal-legacy:        #00b9b2;
  --cfa-teal-light-legacy:  #9efff9;
  --cfa-teal-accent-legacy: #10c6af;
}