/* ============================================================
   CALEXFIN GLOBAL ENTERPRISE DESIGN SYSTEM TOKENS & BASE RULES
   Extracted Reference Design System (Coming Soon Official Theme)
   Visual Direction: Light, Institutional, Corporate, Trustworthy
   Pure White (#FFFFFF) • Off-White Canvas (#F8FAFC) • Slate (#F1F5F9)
   Authoritative Navy (#0B1F4B / #10244F) • CALEXFIN Blue (#1D4ED8)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  /* 1. White & Off-White (Primary Canvas & Clean Cards) */
  --clx-white: #FFFFFF;
  --clx-bg-canvas: #FFFFFF;
  --clx-bg-offwhite: #F8FAFC;
  --clx-bg-slate-light: #F1F5F9;
  --clx-bg-blue-tint: #EFF6FF;
  --clx-bg-surface: #FFFFFF;

  /* 2. Slate Tones & High-Contrast Typography */
  --clx-slate-50: #F8FAFC;
  --clx-slate-100: #F1F5F9;
  --clx-slate-200: #E2E8F0;
  --clx-slate-300: #CBD5E1;
  --clx-slate-400: #94A3B8;
  --clx-slate-500: #64748B;
  --clx-slate-600: #475569;
  --clx-slate-700: #334155;
  --clx-slate-800: #1E293B;
  --clx-slate-900: #0F172A;

  --clx-text-dark: #0F172A;      /* Authoritative dark slate */
  --clx-text-secondary: #334155; /* Crisp readable body */
  --clx-text-muted: #64748B;     /* Neutral annotations */
  --clx-text-light: #94A3B8;     /* Subtle captions */
  --clx-text-on-dark: #FFFFFF;   /* White text on dark navy anchors */
  --clx-text-on-dark-sub: #CBD5E1;

  /* 3. CALEXFIN Reference Blue (Principal CTA & Interactive Accent) */
  --clx-blue-primary: #1D4ED8;   /* Anchor Blue (#1D4ED8) */
  --clx-blue-dark: #1E40AF;      /* Deep CTA State (#1E40AF) */
  --clx-blue-hover: #1E40AF;     /* Hover State */
  --clx-blue-active: #172554;    /* Active State */
  --clx-blue-vibrant: #2563EB;   /* Secondary Accent */
  --clx-blue-light: #EFF6FF;     /* Subtle Fill Tint */
  --clx-blue-subtle: rgba(29, 78, 216, 0.08);
  --clx-blue-border: rgba(29, 78, 216, 0.22);
  --clx-blue-glow: 0 4px 14px rgba(29, 78, 216, 0.20);

  /* 4. Corporate Institutional Navy (Footer, Contrasting Anchors, Sidebar) */
  --clx-navy-deep: #071533;      /* Darkest navy */
  --clx-navy-primary: #0B1F4B;   /* Official CALEXFIN Navy */
  --clx-navy-medium: #10244F;    /* Medium corporate anchor */
  --clx-navy-surface: #0E2559;   /* Soft navy panels */
  --clx-navy-border: rgba(255, 255, 255, 0.12);
  --clx-navy-hover: rgba(255, 255, 255, 0.08);

  /* 5. Status Colors & Semantics */
  --clx-green-success: #15803D;
  --clx-green-bg: #DCFCE7;
  --clx-green-border: #BBF7D0;

  --clx-amber-warning: #B45309;
  --clx-amber-bg: #FEF3C7;
  --clx-amber-border: #FDE68A;

  --clx-red-error: #B91C1C;
  --clx-red-bg: #FEE2E2;
  --clx-red-border: #FECACA;

  --clx-info-blue: #1D4ED8;
  --clx-info-bg: #EFF6FF;
  --clx-info-border: #BFDBFE;

  /* 6. Typography Fonts */
  --clx-font-main: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --clx-font-heading: 'Cinzel', 'Playfair Display', Georgia, serif;
  --clx-font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* 7. Typography Scales */
  --clx-text-hero: clamp(2.4rem, 4.5vw, 3.6rem);
  --clx-text-page-title: clamp(2rem, 3.5vw, 2.75rem);
  --clx-text-section-title: clamp(1.6rem, 2.8vw, 2.25rem);
  --clx-text-card-title: 1.25rem;
  --clx-text-body: 0.9375rem;
  --clx-text-small: 0.8125rem;
  --clx-text-badge: 0.6875rem;

  /* 8. Spacing Tokens */
  --clx-space-xs: 0.25rem;
  --clx-space-sm: 0.5rem;
  --clx-space-md: 1rem;
  --clx-space-lg: 1.5rem;
  --clx-space-xl: 2rem;
  --clx-space-2xl: 3rem;
  --clx-space-3xl: 4rem;
  --clx-space-section: 5rem;
  --clx-container-max: 1240px;

  /* 9. Radius Tokens */
  --clx-radius-sm: 6px;
  --clx-radius-md: 10px;
  --clx-radius-lg: 14px;
  --clx-radius-xl: 18px;
  --clx-radius-2xl: 24px;
  --clx-radius-full: 9999px;

  /* 10. Elevation & Refined Shadows */
  --clx-shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.06);
  --clx-shadow-card: 0 2px 8px -2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --clx-shadow-card-hover: 0 8px 24px -4px rgba(15, 23, 42, 0.10), 0 2px 6px -1px rgba(29, 78, 216, 0.08);
  --clx-shadow-modal: 0 20px 45px -10px rgba(11, 31, 75, 0.22), 0 0 0 1px rgba(11, 31, 75, 0.06);

  /* 11. Animation Timings */
  --clx-transition-fast: 180ms ease;
  --clx-transition-normal: 280ms cubic-bezier(0.16, 1, 0.3, 1);
  --clx-transition-slow: 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Global Reset & Base Setup */
html {
  font-family: var(--clx-font-main);
  background-color: var(--clx-bg-canvas);
  color: var(--clx-text-dark);
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background-color: var(--clx-bg-canvas);
  color: var(--clx-text-dark);
}

/* Subtle Architectural Grid Texture */
.clx-grid-bg {
  background-image: 
    linear-gradient(to right, rgba(15, 23, 42, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* Scroll-Driven Reveal System */
.clx-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--clx-transition-slow), transform var(--clx-transition-slow);
  will-change: opacity, transform;
}

.clx-reveal.clx-reveal-active {
  opacity: 1;
  transform: translateY(0);
}

/* Base Typography Classes */
.clx-font-heading,
.font-heading,
.font-serif {
  font-family: var(--clx-font-heading);
  letter-spacing: 0.02em;
}

/* Gradient Text - Aligned with CALEXFIN Blue */
.text-gradient-blue {
  background: linear-gradient(135deg, #1D4ED8 0%, #2563EB 60%, #1E40AF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Global Container */
.clx-container {
  max-width: var(--clx-container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--clx-space-md);
  padding-right: var(--clx-space-md);
}

/* Global Button Base System */
.clx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--clx-font-main);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  padding: 0.65rem 1.35rem;
  border-radius: var(--clx-radius-sm);
  transition: all var(--clx-transition-fast);
  cursor: pointer;
  border: 1px solid transparent;
  outline: none;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
}

.clx-btn-primary {
  background: var(--clx-blue-primary) !important;
  color: var(--clx-white) !important;
  border-color: var(--clx-blue-dark) !important;
  box-shadow: 0 2px 6px rgba(29, 78, 216, 0.25);
}

.clx-btn-primary * {
  color: var(--clx-white) !important;
}

.clx-btn-primary:hover,
.clx-btn-primary:focus,
.clx-btn-primary:active,
.clx-btn-primary:visited {
  background: var(--clx-blue-hover) !important;
  border-color: var(--clx-blue-active) !important;
  color: var(--clx-white) !important;
}

.clx-btn-primary:hover *,
.clx-btn-primary:focus *,
.clx-btn-primary:active * {
  color: var(--clx-white) !important;
}

.clx-btn-secondary {
  background: var(--clx-white);
  color: var(--clx-text-secondary);
  border: 1px solid var(--clx-slate-300);
}

.clx-btn-secondary:hover {
  background: var(--clx-bg-slate-light);
  color: var(--clx-text-dark);
  border-color: var(--clx-slate-400);
  transform: translateY(-1px);
}

.clx-btn-outline {
  background: transparent;
  color: var(--clx-text-secondary);
  border: 1px solid var(--clx-slate-300);
}

.clx-btn-outline:hover {
  border-color: var(--clx-blue-primary);
  color: var(--clx-blue-primary);
  background: var(--clx-blue-light);
}

.clx-btn-ghost {
  background: transparent;
  color: var(--clx-blue-primary);
  border-color: transparent;
}

.clx-btn-ghost:hover {
  background: var(--clx-blue-light);
}

/* Global Card System (Light Corporate Cards) */
.clx-card,
.corp-card {
  background: var(--clx-white);
  border: 1px solid var(--clx-slate-200);
  border-radius: var(--clx-radius-md);
  padding: var(--clx-space-lg);
  box-shadow: var(--clx-shadow-card);
  transition: transform var(--clx-transition-normal), border-color var(--clx-transition-normal), box-shadow var(--clx-transition-normal);
}

.clx-card:hover,
.corp-card:hover {
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--clx-shadow-card-hover);
  transform: translateY(-2px);
}

.clx-card:hover .clx-icon-zoom,
.corp-card:hover .clx-icon-zoom {
  transform: scale(1.08);
  color: var(--clx-blue-primary);
}

/* Remap legacy dark card classes to the crisp institutional white card */
.clx-card-dark,
.corp-card-dark {
  background: var(--clx-white);
  border: 1px solid var(--clx-slate-200);
  border-radius: var(--clx-radius-lg);
  padding: var(--clx-space-lg);
  color: var(--clx-text-dark);
  box-shadow: var(--clx-shadow-card);
  transition: transform var(--clx-transition-normal), border-color var(--clx-transition-normal), box-shadow var(--clx-transition-normal);
}

.clx-card-dark:hover,
.corp-card-dark:hover {
  background: var(--clx-white);
  border-color: rgba(29, 78, 216, 0.35);
  box-shadow: var(--clx-shadow-card-hover);
  transform: translateY(-2px);
}

.clx-icon-zoom {
  transition: transform var(--clx-transition-fast), color var(--clx-transition-fast);
}

/* Global Form Control System (Clean Light Inputs) */
.clx-input,
.clx-select,
.clx-textarea {
  width: 100%;
  background: var(--clx-white);
  border: 1px solid var(--clx-slate-300);
  border-radius: var(--clx-radius-sm);
  padding: 0.65rem 0.95rem;
  color: var(--clx-text-dark);
  font-family: var(--clx-font-main);
  font-size: var(--clx-text-small);
  transition: border-color var(--clx-transition-fast), box-shadow var(--clx-transition-fast);
  box-sizing: border-box;
}

.clx-input:focus,
.clx-select:focus,
.clx-textarea:focus {
  border-color: var(--clx-blue-primary);
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14);
  outline: none;
}

.clx-input::placeholder,
.clx-textarea::placeholder {
  color: var(--clx-slate-400);
}

/* Global Image Container System */
.clx-image-container {
  width: 100%;
  border-radius: var(--clx-radius-xl);
  background: var(--clx-bg-slate-light);
  border: 1px solid var(--clx-slate-200);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Badge System */
.clx-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--clx-radius-full);
  font-size: var(--clx-text-badge);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.clx-badge-blue {
  background: var(--clx-blue-light);
  color: var(--clx-blue-primary);
  border: 1px solid var(--clx-blue-border);
}

.clx-badge-grey {
  background: var(--clx-bg-slate-light);
  color: var(--clx-text-secondary);
  border: 1px solid var(--clx-slate-300);
}

/* Modal Backdrop */
.clx-modal-backdrop,
.modal-backdrop {
  background: rgba(7, 21, 51, 0.65);
  backdrop-filter: blur(8px);
}

/* Hero Contrast Gradient Text Fix on Dark Contextual Backgrounds */
.clx-hero-env .text-gradient-blue,
.dark-hero .text-gradient-blue,
section.clx-hero-env .text-gradient-blue,
#hero .text-gradient-blue,
[data-hero] .text-gradient-blue {
  background: linear-gradient(135deg, #93C5FD 0%, #60A5FA 50%, #38BDF8 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Light-card safety nets for remapped dark classes */
/* Light-card safety nets for remapped dark classes (Strictly Excluding Action Buttons) */
.clx-card-dark .text-white:not(button):not(button *):not(a.clx-btn):not(a.clx-btn *):not(a[class*="bg-"]):not(a[class*="bg-"] *):not([class*="bg-blue"]):not([class*="bg-blue"] *):not([class*="from-blue"]):not([class*="from-blue"] *):not([class*="bg-[#1D4ED8]"]):not([class*="bg-[#1D4ED8]"] *),
.corp-card-dark .text-white:not(button):not(button *):not(a.clx-btn):not(a.clx-btn *):not(a[class*="bg-"]):not(a[class*="bg-"] *):not([class*="bg-blue"]):not([class*="bg-blue"] *):not([class*="from-blue"]):not([class*="from-blue"] *):not([class*="bg-[#1D4ED8]"]):not([class*="bg-[#1D4ED8]"] *) {
  color: var(--clx-navy-deep) !important;
}

.clx-card-dark .text-slate-300,
.clx-card-dark .text-slate-400,
.corp-card-dark .text-slate-300,
.corp-card-dark .text-slate-400 {
  color: var(--clx-text-muted) !important;
}

.clx-card-dark .bg-\[\#12284E\],
.corp-card-dark .bg-\[\#12284E\] {
  background-color: #FFFFFF !important;
  color: var(--clx-text-dark) !important;
}

/* ============================================================
   WCAG 2.2 AA ACCESSIBILITY & CONTRAST ENFORCEMENT
   Prevents washed-out blue text, pale icons, and low-contrast
   card content across all light-canvas public pages
   ============================================================ */
section:not(footer):not(.clx-hero-env):not(#hero) .text-blue-400:not([class*="group-hover"]) {
  color: var(--clx-blue-primary) !important; /* #1D4ED8: 8.3:1 contrast ratio on white/light-slate */
}

section:not(footer):not(.clx-hero-env):not(#hero) .border-blue-500\/30,
section:not(footer):not(.clx-hero-env):not(#hero) .border-blue-500\/40 {
  border-color: rgba(29, 78, 216, 0.28) !important;
}

section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-900"],
section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-950"] {
  background-color: var(--clx-bg-blue-tint) !important; /* #EFF6FF clean accessible container */
  border-color: #BFDBFE !important;
  color: var(--clx-blue-primary) !important;
}

section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-900"] svg,
section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-950"] svg,
section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-900"] [data-lucide],
section:not(footer):not(.clx-hero-env):not(#hero) [class*="bg-blue-950"] [data-lucide] {
  color: var(--clx-blue-primary) !important;
}

/* Ensure secondary descriptions maintain minimum 4.5:1 text contrast */
section:not(footer):not(.clx-hero-env):not(#hero) .text-slate-500 {
  color: var(--clx-slate-700) !important; /* #334155: 9.0:1 contrast ratio */
}