/* =================================================================
   FLUCSUS BANK — Design Tokens (Light Premium Banking Theme)
   Paleta: brandbook Flucsus | Cor primária #E7083F
   ================================================================= */
:root {
  /* ── Brand ── */
  --brand:            #E7083F;
  --brand-strong:     #B8062F;
  --brand-soft:       #FFEEE4;
  --brand-glow:       rgba(231, 8, 63, 0.12);
  --brand-deep:       #3A0210;

  /* ── Backgrounds ── */
  --bg:               #F4F5F7;
  --surface:          #FFFFFF;
  --surface-2:        #FAFAFC;
  --surface-3:        #F0F1F4;
  --overlay:          rgba(10, 12, 22, 0.55);

  /* ── Borders ── */
  --border:           #E6E7EC;
  --border-strong:    #D0D5DD;
  --divider:          #EDEEF2;

  /* ── Text ── */
  --text:             #0E0F1A;
  --text-2:           #4B5063;
  --text-3:           #7B7F8E;
  --text-muted:       #A4A8B6;
  --text-on-brand:    #FFFFFF;
  --text-inverse:     #FFFFFF;

  /* ── Semantic (entrada=green, saida=red) ── */
  --positive:         #047857;
  --positive-bg:      #E6F5EE;
  --negative:         #B91C1C;
  --negative-bg:      #FCEEEE;
  --warning:          #C2540A;
  --warning-bg:       #FFF4E5;
  --info:             #1E40AF;
  --info-bg:          #EAEEFB;

  /* ── Sidebar/Header ── */
  --header-bg:        #FFFFFF;
  --sidebar-bg:       #0B0C12;
  --sidebar-text:     #C8CAD4;
  --sidebar-text-active: #FFFFFF;
  --sidebar-active:   rgba(231, 8, 63, 0.18);

  /* ── Shadows ── */
  --shadow-sm:        0 1px 2px rgba(15, 18, 28, 0.04);
  --shadow:           0 1px 3px rgba(15, 18, 28, 0.06), 0 8px 24px rgba(15, 18, 28, 0.05);
  --shadow-md:        0 2px 4px rgba(15, 18, 28, 0.06), 0 12px 36px rgba(15, 18, 28, 0.08);
  --shadow-lg:        0 8px 16px rgba(15, 18, 28, 0.08), 0 24px 64px rgba(15, 18, 28, 0.12);
  --shadow-brand:     0 8px 24px rgba(231, 8, 63, 0.25);

  /* ── Radius ── */
  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius:      12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ── Spacing ── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ── Typography ── */
  --font:       'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs:       14px;
  --fs-md:    15px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-2xl:   22px;
  --fs-3xl:   28px;
  --fs-4xl:   36px;
  --fs-5xl:   44px;

  /* ── Transitions ── */
  --t-fast:   120ms ease;
  --t:        200ms ease;
  --t-slow:   320ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Z-index ── */
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

@media (max-width: 720px) {
  :root {
    --fs-4xl: 30px;
    --fs-5xl: 36px;
  }
}