/* ==========================================================================
   Finfly India — Design Tokens (High-Contrast Black & Silver-White Combo Theme)
   Sleek Dark Canvas with Standout Soft Cool Silver-White Feature & Tool Cards
   ========================================================================== */

:root {
  /* ---- Dark Page Backgrounds ---- */
  --color-navy-950: #07091E;       /* primary page background - deep rich dark */
  --color-navy-900: #0A0C24;       /* secondary dark section */
  --color-navy-800: #12142E;       /* dark panel background */
  --color-navy-700: #1B2145;       /* dark card surface */
  --color-navy-600: #262C52;
  --color-slate-500: #525872;      /* muted border on dark */

  /* ---- Soft Silver-White Surfaces (3-4 shades darker than pure #FFFFFF) ---- */
  --color-white: #FFFFFF;
  --color-white-card: #E8EDF5;     /* soft cool silver-grey white */
  --color-white-card-hover: #F0F4FA;
  --color-card-inner: #DCE3EE;
  --color-offwhite: #F1F4F9;

  /* ---- Brand Accents ---- */
  --color-primary: #1A56DB;        /* vibrant blue */
  --color-primary-hover: #1E429F;
  --color-teal-500: #059669;       /* emerald accent */
  --color-teal-400: #10B981;
  --color-teal-600: #047857;
  --color-orange-500: #F97316;     /* warm orange highlight */
  --color-orange-400: #FB923C;

  /* ---- Neutrals ---- */
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-600: #475467;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;

  /* ---- Typography & Text Colors on Dark ---- */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(244, 246, 255, 0.72);
  --color-text-muted: #858BA8;
  --color-text-inverse: #FFFFFF;
  --color-text-on-dark-secondary: rgba(244, 246, 255, 0.70);

  /* ---- Text Colors inside Highlight Cards ---- */
  --color-card-heading: #0F172A;
  --color-card-body: #334155;
  --color-card-muted: #64748B;
  --color-card-border: #CBD5E1;

  /* ---- Borders & Dividers ---- */
  --color-border: rgba(244, 246, 255, 0.12);
  --color-border-on-dark: rgba(244, 246, 255, 0.12);

  /* ---- Aliases ---- */
  --color-text: #C9CDE0;
  --color-muted: #858BA8;
  --color-accent: #6D63FF;
  --color-accent-light: #928AFF;
  --color-cyan: #39D9FF;
  --color-greensee: #35D6A5;

  /* ---- Typography Scale ---- */
  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --fs-h1: clamp(2.75rem, 5vw + 1rem, 4.75rem);
  --fs-h2: clamp(1.75rem, 2.4vw + 1rem, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.2vw + 1rem, 1.75rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.15;
  --lh-normal: 1.55;
  --lh-loose: 1.7;

  /* ---- Spacing Scale ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Layout & Radii ---- */
  --container-max: 1200px;
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 8px rgba(4, 6, 20, 0.25);
  --shadow-md: 0 12px 32px rgba(4, 6, 20, 0.35);
  --shadow-lg: 0 24px 56px rgba(4, 6, 20, 0.50);
  --shadow-white-card: 0 15px 40px -5px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-white-card-hover: 0 25px 60px -8px rgba(0, 0, 0, 0.6), 0 0 25px rgba(255, 255, 255, 0.15);
  --shadow-teal-glow: 0 8px 28px rgba(6, 187, 132, 0.30);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 500ms;
}