/* ============================================
   PROFIN SOLUTIONS — DESIGN TOKENS v4
   Banking-grade: Navy authority + White clarity
   Amber ONLY for brand logo & primary CTA
   ============================================ */
:root {
  /* ── Brand Amber — LOGO & CTA ONLY ── */
  --amber:          #E8820C;
  --amber-light:    #F5A623;
  --amber-pale:     #FFF8EE;
  --amber-glow:     rgba(232,130,12,0.15);

  /* ── Navy — PRIMARY AUTHORITY COLOR ── */
  --navy:           #1B2B6B;
  --navy-mid:       #243580;
  --navy-light:     #3D52A0;
  --navy-pale:      #EEF1FB;
  --navy-pastel:    #DDE3F5;
  --navy-glow:      rgba(27,43,107,0.10);

  /* ── Slate — body text, cards, borders ── */
  --slate-900:      #0F172A;
  --slate-700:      #334155;
  --slate-500:      #64748B;
  --slate-400:      #94A3B8;
  --slate-200:      #E2E8F0;
  --slate-100:      #F1F5F9;
  --slate-50:       #F8FAFC;

  /* ── Pure White ── */
  --white:          #FFFFFF;

  /* ── Section Backgrounds — DISTINCT ── */
  --sect-nav:       rgba(255,255,255,0.95);
  --sect-hero:      #FFFFFF;           /* pure white */
  --sect-finder:    #F8FAFC;           /* cool slate 50 */
  --sect-products:  #FFFFFF;           /* white */
  --sect-calc:      #1B2B6B;           /* deep navy */
  --sect-elig:      #F8FAFC;           /* slate 50 */
  --sect-docs:      #FFFFFF;           /* white */
  --sect-process:   #1B2B6B;           /* navy (2nd dark section) */
  --sect-why:       #F8FAFC;           /* slate */
  --sect-testi:     #FFFFFF;           /* white */
  --sect-faq:       #F1F5F9;           /* slate 100 */
  --sect-contact:   #0F172A;           /* darkest — slate 900 */

  /* ── Status ── */
  --green:          #059669;
  --green-pale:     #ECFDF5;
  --red:            #DC2626;

  /* ── Gradients ── */
  --grad-amber:     linear-gradient(135deg,#E8820C 0%,#F5A623 100%);
  --grad-navy:      linear-gradient(135deg,#1B2B6B 0%,#3D52A0 100%);
  --grad-hero:      linear-gradient(135deg,#FFFFFF 0%,#F8FAFC 60%,#EEF1FB 100%);
  --grad-cta:       linear-gradient(145deg,#0F172A 0%,#1B2B6B 50%,#0F172A 100%);

  /* ── Shadows ── */
  --shadow-xs:      0 1px 3px rgba(15,23,42,0.06);
  --shadow-sm:      0 4px 12px rgba(15,23,42,0.08);
  --shadow-md:      0 8px 28px rgba(15,23,42,0.10);
  --shadow-lg:      0 20px 48px rgba(15,23,42,0.12);
  --shadow-xl:      0 32px 64px rgba(15,23,42,0.14);
  --shadow-amber:   0 8px 24px rgba(232,130,12,0.30);
  --shadow-navy:    0 8px 24px rgba(27,43,107,0.22);
  --shadow-card:    0 1px 3px rgba(15,23,42,0.05), 0 8px 24px rgba(15,23,42,0.07);

  /* ── Typography ── */
  --font-display:   'Sora', sans-serif;
  --font-body:      'Outfit', sans-serif;

  /* ── Motion ── */
  --ease-out:       cubic-bezier(0.16,1,0.3,1);
  --ease-inout:     cubic-bezier(0.4,0,0.2,1);
  --dur-fast:       0.15s;
  --dur-mid:        0.3s;
  --dur-slow:       0.55s;

  /* ── Radius ── */
  --r-sm:    8px;
  --r-md:    12px;
  --r-lg:    16px;
  --r-xl:    24px;
  --r-2xl:   32px;
  --r-3xl:   48px;
  --r-pill:  999px;

  /* ── Layout ── */
  --max-width:    1280px;
  --nav-height:   72px;
  --section-pad:  88px 8%;
  --container-pad: 40px;

  /* ── Dynamic Segment Variables ── */
  --seg-salaried-grad: linear-gradient(135deg, #1B2B6B 0%, #4F46E5 100%);
  --seg-salaried-accent: #6366F1;
  --seg-salaried-rgb: 99, 102, 241;
  --seg-salaried-glow: rgba(99, 102, 241, 0.2);

  --seg-business-grad: linear-gradient(135deg, #0F766E 0%, #D97706 100%);
  --seg-business-accent: #E8820C;
  --seg-business-rgb: 232, 130, 12;
  --seg-business-glow: rgba(232, 130, 12, 0.2);

  --seg-professional-grad: linear-gradient(135deg, #6D28D9 0%, #0891B2 100%);
  --seg-professional-accent: #8B5CF6;
  --seg-professional-rgb: 139, 92, 246;
  --seg-professional-glow: rgba(139, 92, 246, 0.2);
}

/* ── Responsive Variable Scaling ── */
@media (min-width: 1920px) {
  :root {
    --max-width: 1440px;
    --section-pad: 100px 8%;
  }
}
@media (min-width: 2560px) {
  :root {
    --max-width: 1600px;
    --section-pad: 120px 10%;
  }
}
@media (max-width: 1024px) {
  :root {
    --section-pad: 64px 6%;
    --container-pad: 32px;
  }
}
@media (max-width: 768px) {
  :root {
    --section-pad: 52px 5%;
    --nav-height: 64px;
    --container-pad: 20px;
  }
}
@media (max-width: 480px) {
  :root {
    --section-pad: 40px 16px;
    --container-pad: 16px;
  }
}